3D变换

2017-09-13 20:39 出处:简书 人气: 评论(0

之前我们学过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

本文标签: wrapbox变换class3Ddiv

相关文章

Copyright © 2002-2017 JISHUX. 技术栈 版权所有

京ICP备15061484号-3