关于transform属性的一些理解
3D transform
transform进行动画演示时,是以元素的中心为基准点的,可以使用transform-origin改变元素转变的基准点。
所有的transform动作改变都会引起X、Y轴的坐标变化。
perspective:3000px表示我们眼睛距离屏幕3000px时观看到的效果。呈现在显示器中。一般来说perspective属性都应用在父元素上,我们可以把这个父元素称为舞台元素.表透视,近大远小。
transform: translateZ(400px):立方体前面正对着屏幕,所以不用旋转,只需向Z轴前移动距离。
1、旋转rotateX(),rotateY()
参考的链接:
◆http://www.cnblogs.com/xiaohuochai/p/5350254.html
◆https://www.cnblogs.com/grey-zhou/p/5174114.html
remain:关于rotateX、rotateY的转换角度,绕着X、Y轴旋转后整个坐标会一起旋转,也就是坐标系永远同元素一起变动,每个元素有自己的坐标系,元素的初始状态中,原点在元素的中心。坐标系的方向:X轴方向水平向右,Y轴方向竖直向下,Z轴垂直屏幕,朝向我们,即正对的方向就是自己的Z轴方向,各坐标轴的起点在原点。自己想象3D旋转时,X、Y、Z轴不变,视线垂直屏幕不需要跟着旋转,Z轴方向一定是div正面朝向。
比如说rotateX()、rotateY()在没有设定坐标是以元素的中心为基点,但设置transform-origin后会发生改变。
以下的例子是元素旋转了那Z轴也会一起变动,内和外是相对于Z轴来说的,Z轴方向的是外,反之是内。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>想了两天,终于有点眉目了!又一下子懵了...略懂了(脑壳痛、三维空间不是很好,弄了三天)</title> <style> body { margin: 70px; } .a { position: relative; display: inline-block; z-index: 4; width: 180px; height: 210px; margin-top: 90px; margin-right: 80px; /* 测试元素的旋转角度 */ /* 去掉perspective有不同的效果 */ background: lightpink; perspective: 900px; } h3, p { /*position: absolute;*/ margin-top: 30px; margin-bottom: -30px; } div.b, div.b1, div.c, div.c1, div.bb, div.bb1, div.cc, div.cc1, div.bbb, div.bbb1, div.ccc, div.ccc1 { position: absolute; z-index: 2; width: 180px; height: 210px; background: lightblue; } .b { transform: rotateY(45deg); /* 向里面旋转 */ transform-origin: 0 0; } .b1 { transform: rotateY(-45deg);/* 向外面旋转 */ transform-origin: 0 0; } .c { transform: rotateX(30deg); /* 向外面旋转 */ transform-origin: 0 0; } .c1 { transform: rotateX(-30deg); /* 向里面旋转 */ transform-origin: 0 0; } .bb { transform: rotateX(-30deg) rotateY(45deg); transform-origin: 0 0; } .bb1 { transform: rotateX(-30deg) rotateY(-45deg); transform-origin: 0 0; } .cc { transform: rotateX(30deg) rotateY(-45deg); transform-origin: 0 0; } .cc1 { transform: rotateX(30deg) rotateY(45deg); transform-origin: 0 0; } .bbb { transform: rotateY(45deg) rotateX(-30deg); transform-origin: 0 0; } .bbb1 { transform: rotateY(-45deg) rotateX(-30deg); transform-origin: 0 0; } .ccc { transform: rotateY(-45deg) rotateX(30deg); transform-origin: 0 0; } .ccc1 { transform: rotateY(45deg) rotateX(30deg); transform-origin: 0 0; } </style> </head> <body> <h4 style="color:red">注意:旋转之后坐标轴的转换方向</h4> <h3>Y轴和X轴上的转换↓</h3> <div class="a"> <div class="b">y45<br>rotateY(+deg),绕Y轴,X轴由平面往里面旋转,X轴方向改变,由平面向里逆时针旋转。</div> </div> <div class="a"> <div class="b1">y-45<br>rotateY(-deg),绕Y轴,X轴由平面往外面旋转,X轴方向由水平顺时向旋转一定角度发生改变</div> </div> <div class="a"> <div class="c">x30<br>rotateX(+deg),绕X轴,Y轴由平面向外旋转,Y轴的方向由竖直向下往外面旋转一定角度发生变换</div> </div> <div class="a"> <div class="c1">x-30<br>rotateX(-deg),绕X轴,Y轴由平面向里旋转,Y轴的方向由竖直向下往里面旋转一定角度发生转换</div> </div> <h3>先X轴后Y轴多值转换↓</h3> <p>没有perspective属性情况下,看似Y轴没有变化</p> <div class="a"> <div class="bb">x-30 y45 向上↗</div> </div> <div class="a"> <div class="bb1">x-30 y-45 向下↘</div> </div> <div class="a"> <div class="cc">x30 y-45 向上↗</div> </div> <div class="a"> <div class="cc1">x30 y45 向下↘</div> </div> <h3>先Y轴后X轴多值转换↓</h3> <p>没有perspective值得情况下,看似X轴没有变化</p> <div class="a"> <div class="bbb">y45 x-30 </div> </div> <div class="a"> <div class="bbb1">y-45 x-30 </div> </div> <div class="a"> <div class="ccc">y-45 x30 </div> </div> <div class="a"> <div class="ccc1">y45 x30 </div> </div> </body> </html>
2、倾斜skew()、skewX()、skewY()
skew(xdeg [,ydeg]) 如果省略一个,则默认是skewX,Xdge或Ydeg没有的话则表示为0 。
skew的变换,也会引起坐标系的变换。
skewX:表示Y轴向X轴倾斜,变动的是Y轴,所以X轴是不变的,两条水平线长度且在Y轴坐标不变,故表示垂直距离不变,则表示高度不变;Y轴的倾斜会引起竖直方向的线发生倾斜,则引起对角线长度发生变化,对角线越长,表示倾斜角度越大,当角度为90°或270°时,则会和X轴重合,元素被隐藏。
skewX(+deg):Y轴向X轴正方向(向右)倾斜【逆时针】
skewX(-deg):Y轴向X轴反方向(向左)倾斜【顺时针】
skewY:表示X轴向Y轴倾斜,变动的是X轴,所以Y轴是不变的,两条垂直线长度且在X轴坐标不变,故表示水平距离不变,则表示高度不变;X轴的倾斜会引起水平方向的线发生倾斜,则引起对角线长度发生变化,对角线越长,表示倾斜角度越大,当角度为90°或270°时,则会和Y轴重合,元素被隐藏。
skewY(+deg):X轴向Y轴正方向(向下)倾斜【顺时针】
skewY(-deg):X轴向Y轴反方向(向上)倾斜【逆时针】
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倾斜</title> <style> body { margin: 100px; } /* 在.wrapper和.wrapper div中添加position,这样不至于在skew*中添加文字时会出现元素位置移动, 、 * 其实不是很明白为什么会位置发生变化,也不是很明白position对它们位置变化有什么作用。 * */ .wrapper { position: relative; display: inline-block; width: 150px; height: 150px; margin-top: 60px; margin-right: 40px; background: lightpink; perspective: 800px; } p {position: absolute; right: 0; bottom: 0; margin: 0;} .wrapper div { position: absolute; width: 80px; height: 80px; background: lightblue; border-top: 1.5px solid #00f; border-bottom: 1.5px solid #00f; border-right: 1.5px solid #f00; border-left: 1.5px solid #f00; } .skew3 { transform: skewX(30deg); transform-origin: 0 0; } .skew4 { transform: skewX(-30deg); transform-origin: 0 0; } .skew1 { transform: skewY(30deg); transform-origin: 0 0; } .skew2 { transform: skewY(-30deg); transform-origin: 0 0; } .skew5 { transform: skew(30deg, 30deg); transform-origin: 0 0; } .skew6 { transform: skew(45deg, -45deg); transform-origin: 0 0; } .skew7 { transform: skew(-30deg, 30deg); transform-origin: 0 0; } .skew8 { transform: skew(-30deg, -30deg); transform-origin: 0 0; } </style> </head> <body> <div class="wrapper"> <div class="skew3"></div> <p>X30</p> </div> <div class="wrapper"> <div class="skew4"></div> <p>X-30</p> </div> <div class="wrapper"> <div class="skew1"></div> <p>Y30</p> </div> <div class="wrapper"> <div class="skew2"></div> <p>y-30</p> </div> <div class="wrapper"> <div class="skew5"></div> <p>x30 y30</p> </div> <div class="wrapper"> <div class="skew6"></div> <p>x30 y-30</p> </div> <div class="wrapper"> <div class="skew7"></div> <p>x-30 y30</p> </div> <div class="wrapper"> <div class="skew8"></div> <p>x-30 y-30</p> </div> </body> </html>
我本来想弄清楚这个:transform: skew rotate 的,但是当前还不是很明白,所以这个留着以后再弄吧。