CSS3 变形记CSS3 变形CSS3变形是一些效果的集合，比如平移，旋转，缩放和倾斜效果，每个效果都称为变形函数。
transformtransform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform:none | <transform-function> [<transform-function>] *
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; margin:40px; position:absolute; opacity:1; background:rgb(0, 148, 255); } .box2{ background:rgb(0, 148, 255); opacity:.5;/*旋转45度*/ transform:rotate(45deg); }</style></head><body><div class="box1"></div> <div class="box2"></div> </body></html>
旋转
缩放
.box2{.../*放大了1.5倍*/transform:scale(1.5);}
位移
.box2{.../*X轴与Y轴都移动150px*/transform:translate(150px,150px);}
倾斜
.box2{.../*X轴倾斜30度*/transform:skew(30deg);}
transform-origin用来指定元素的中心点位置。
transform-origin:x-axis y-axis z-axis
transform进行变形时，默认是以元素自己中心点为原点进行变形的。通过transform-origin属性可以改变元素的中心点，从而以我们指定的点为中心点进行变形。
.box2{...transform-origin:left top;}
上例中，元素的中心点从默认的中间点center改为左上角点left top。就是说以左上角的点为基点进行变形。很简单吧，其他位置的点俺就不一一示范了，另外transform-origin不能改变translate的中点。
transform-styletransform-style属性规定如何在3D空间中呈现被嵌套的元素。
transform-style:flat | PReserver-3d
简单来说，就是能够创建一个3D空间。让子元素在3D空间中变形。
perspectiveperspective 属性用来设置用户和元素3D空间Z平面之间的距离。值越小，3D效果越明显。
perspective:none | number
当元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D平面中。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*没有添加perspective时效果*/ #box1 div{ position:absolute; } #box1 div img{ transform-origin:bottom; } #box1 .box1-1 img{ opacity:.5; } #box1 .box1-2 img{ transform:rotateX(45deg); } /*添加perspective时效果*/ #box2 div{ position:absolute; left:400px; perspective:500px; } #box2 div img{ transform-origin:bottom; } #box2 .box2-1 img{ opacity:.5; } #box2 .box2-2 img{ transform:rotateX(45deg); }</style></head><body><div id="box1"> <div class="box1-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div> <div class="box1-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div></div><div id="box2"> <div class="box2-1"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div> <div class="box2-2"><img src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png"></div></div></body></html>
可见，设置了perspective的元素，其3D效果更加明显了。
另外，在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。不同的是，perspective属性用在父元素中，perspective()函数用在当前的子元素中，并且与transform中的其他的函数一起使用。如：
transform:rotate(45deg) perspective(500px);
其效果是一样的。
perspective-origin用来决定perspective属性的起点位置就，简单说就是观看的视角。
perspective-origin: x-axis y-axis;
perspective-origin与perspective属性一样，必须定义在父元素的元素上。换句话说，perspective-origin是与perspective结合使用的。
#box2 div{...perspective-origin:bottom right;}
右下角效果
左下角效果
左上角效果
右上角效果
上角效果
右角效果
下角效果
左角效果
默认值，中角。
backface-visibilitybackface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到背面时，该属性很有用。
backface-visibility:visible | hidden;
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @keyframes rotate{ 0%{ transform:rotateY(0deg); } 100%{ transform:rotateY(360deg); } } #box1,#box2{ width:300px; height:400px; float:left; margin:0 20px; transform-style: preserve-3d; animation:rotate 3s ease-in-out infinite alternate; } div div { perspective: 1000px; position:absolute; top:0; right:0; bottom:0; left:0; } #box1 div{ /*第一个图片背面不可见*/ backface-visibility: hidden; } #box1 .box1-1,#box2 .box2-1{ background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%; z-index:2; } #box1 .box1-2,#box2 .box2-2{ background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB2cgJ7dVXXXXb3XXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%; transform:rotateY(180deg); }</style></head><body><div id="box1"> <div class=&qu
