技术栈

主页 > 前端开发 >

3D变换

之前我们学过2D变换,今天一起来学习一下3D变换,想到3D,我么会想到一个立体的空间。
那么第一步,我们需要搭建一个3D的空间
<div class="wrap">
<div class="box">
<div class="redDiv">1</div>
<div class="blueDiv">2</div>
</div>
</div>
最外面的.wrap我们看做景深层,并给景深层设置景深,景深的意思就是我们眼睛离屏幕的距离perspective:1600px;
中间的.box我们将设置3D的变换区transform-style: preserve-3d;
最里面的div我们将参照.box来进行3D变换,比如绕X轴/Y轴/Z轴旋转一定角度,相对于X轴/Y轴/Z轴进行位置变换,以及缩放比例,因此我们知道transform属性可以设置3个属性值,分别为translate rotate scale

责任编辑:admin  二维码分享:
本文标签: wrapbox变换class3Ddiv
点击我更换图片

评论列表