CSS3转换

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

 

转载于:https://www.cnblogs.com/jian1234/p/9860086.html