2D转换
1.平移 transform:translate(x,y);
2.缩放 transform:scale(x,y);
3.旋转 transform:rotate(deg) //deg 度数
旋转中心 transform-origin:right top; //例子
x-axis | 定义视图被置于 X 轴的何处。可能的值: left center right length % |
---|---|
y-axis | 定义视图被置于 Y 轴的何处。可能的值: top center bottom length % |
length 指 位置
3D变形
左手法则
左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余手指卷曲的方向。
transform:rotateX(deg)
transform:rotateY(deg)
transform:rotateZ(deg)
方向由左手法则比划出 一开始想了很久很难想到
rotatex、rotatez的旋转正方向是顺时针,rotatey的旋转正方向是逆时针。
perspective
perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素
perspective: 800px;