2D转换 transform
旋转rotate
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
移动translate
transform: translate(200px, 100px);
缩放scale
transform: scale(.5, .5);
扭曲skew
transform: skew(15deg, 15deg);
3D转换 transform
旋转rotate3d
transform: rotate3d(1, 1, 1, 45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
移动translate3d
transform: translate3d(200px, 200px, 200px);
transform: translateX(200px);
transform: translateY(200px);
transform: translateZ(200px);
缩放scale3d
transform: scaleX(.5);
transform: scaleY(.5);
transform: scaleZ(.5);
transform: scale3d(.5, .5, .5);
transform与坐标系统 transform-origin
transform-origin: left top;
transform-origin: left top 0;
transform-origin: 25% top 0;
transform-style扩展属性
transform-style: preserve-3d; 立体效果
perspective扩展属性
perspective: 500px; 远近效果
perspective-origin: 50% 50%; 观看角度 top bottom center
backface-visibility扩展属性
backface-visibility: hidden; 背面背向用户时是否可见 visible