2D:
.box { width: 100px; height: 100px; background: #aaa; /*位移:transform: translate(水平位移值,垂直位移值)*/ transform: translate(45px,45px); /*旋转:transform: rotate(正值为顺时针,负值为逆时针);*/ transform: rotate(-90deg); /*缩放:transform: scale(水平缩放值,垂直缩放值);*/ transform: scale(2,1.5); }
3D:
!!!注意: transform-style: preserve-3d; /*flat表示默认值,所有子元素在2D平面呈现; preserve-3d;表示所有子元素在3D空间中呈现;*/ perspective:500px; /*要给予其父元素添加*/ /*perspective为距用户的视距,一般为500px*/
.box { width: 100px; height: 100px; background: #aaa; /*位移:transform: translate3d(水平位移值,垂直位移值,用户距离显示屏的距离)*/ transform: translate3d(45px,45px,100px); /*!*旋转:transform: rotate3d(x,y,z,角度值);*!*/ transform: rotate3d(3,1,2,60deg); /*角度值被x,y,z所分割 x为30deg,y为10deg,z为20deg*/ /*!*缩放:transform: scale3d(水平缩放值,垂直缩放值,z轴缩放值);*!*/ transform: scale3d(2,1.5,1); }