2D移动和旋转
二维平面移动
语法:
transform:translateX(移动的距离) translateY(移动的距离);
Transform:translate(水平移动距离,垂直移动距离)
可以设置负值,水平的正值是向右移动,垂直的正值是向下移动
二维平面旋转
语法:
Transform:rotate(30deg);
旋转原点的设置
transform-origin:center(默认值)
可以设置left,top,right,bottom,center,
百分比设置:transform-origin:水平位置的百分比 垂直位置的百分比
3D移动和旋转
透视点
在所看元素的父元素或者是祖先元素上设置透视点
语法:perspective: 1000px;
三维立体的移动
语法:
transform: translateZ(200px);
transform: translate3d(水平移动,垂直移动,z轴移动);
z轴:z轴垂直于屏幕,方向是射向我们。
三维立体的旋转
语法:
/*transform: rotateX(30deg);*/
/*transform: rotateY(30deg);*/
/*transform: rotateZ(30deg);*/
transform: rotate3d(1,1,1,30deg);
解析:rotate3d(x,y,z,30deg),用x,y,z建立一个用原点射向(x,y,z)这个坐标的向量,用这个向量作为轴进行旋转。
缩放
语法:
transform:scale(整体放大的倍数)
Transform:scale(水平缩放的倍数,垂直缩放的倍数)
倾斜
语法:transform: skew(15deg,0deg);
小技巧:如果先要文字板正,那么反倾斜即可