css3旋转

标签：

首先创建一个容器如div,然后设置其相关的3d属性，主要是三个1.perspective 透视，值越小3D感越强，值越大视觉正常。2.perspective-origin,透视点一般居于容器的中心。3.transform-style:
preserve-3d,声明容器内的环境是3D环境，其内容可以以3D效果显示，就是每一个具体的内容都有X，Y，Z轴。如下
<div class="con" id="con">
<img id="img1" src="../img/greengirl.jpg" >
<img id="img2" src="../img/ccce6e770d1edb6035c63fef7c0cc136.jpg" >
<img id="img3" src="../img/flower.jpg" >
<img id="img4" src="../img/mm.jpg" >
</div>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
.con{
position: relative;
perspective: 2000000px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
要设置为相对定位，因为他的内容要设置为绝对定位，重合在一起，然后再设置它们各自的旋转角度和偏移的位移。/*每张图片绕着自身的x或y轴转后，图片自身的Z轴也会跟着旋转，绕X往后的度数为正值，绕Y轴往右的度数为正，向Z轴平移量为图片宽度的一半*/
#img1{transform:rotateX(0deg) translateZ(200px);}前
#img2{transform:rotateX(0deg) translateZ(-200px);}后
#img3{transform:rotateY(90deg) translateZ(-200px);}左
#img4{transform:rotateY(90deg) translateZ(200px);}右

css3旋转

标签：

原文地址：http://www.cnblogs.com/lak110/p/5975915.html