首先创建一个容器如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" alt="">
<img id="img2" src="../img/ccce6e770d1edb6035c63fef7c0cc136.jpg" alt="">
<img id="img3" src="../img/flower.jpg" alt="">
<img id="img4" src="../img/mm.jpg" alt="">
</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);}右
相关文章
- CAD输出的HPGL格式时什么格式怎么旋转度数?
- CSS3学习笔记--line-height:150%与line-height:1.5的真正区别
- CSS3制作下拉菜单
- 猫猫学IOS(二)UI之button操作 点击变换 移动 放大缩小 旋转
- Android DIY之路 (一) 指定区域多图片合成 放大 缩小 镜像 旋转 等(转)
- AJ学IOS(02)UI之按钮操作 点击变换 移动 放大缩小 旋转
- Golang | Leetcode Golang题解之第61题旋转链表-题解:
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
- Css3渐变实例Demo(一)
- LeetCode154.寻找旋转排序数组中的最小值 II