最近学习了 CSS3 的动画, 在这里做一个总结。现在大部分的交互动画, 我们都可以使用 CSS3 来完成, 效率更高，并且在移动端上的兼容非常好。但是缺少一种正向编程的快感 (个人感觉)。
先引出关于 3D 的几个基本技术点, 多的就不说了, 这几个也够够的了:
旋转:rotate、rotateX、rotateY、rotateZ
移动:translate3D、translateX、translateY、translateZ
景深、透视:perspective
3D 空间:transform-style:perseve-3d
rotate、rotateX、rotateY、rotateZ 旋转 rotate:
transform:rotate(45deg);=> 顺时针旋转 45 度
rotateX:
`transform:rotateX(45deg);=> 垂直绕着 X 轴旋转 (图片往后倒，你往前扑的方向)，有一个很好玩的形容，就是体操运动员绕着单杠在旋转!! 不知道的可以去看一下。
rotateY:
transform:rotateY(45deg);=> 垂直绕着 Y 轴逆时针旋转 (也就是图片正方向的右肩移动)，也有一个很好玩的形容, 就是跳钢管舞。
rotateZ:
transform:rotateZ(45deg);=> 跟 rotate 一样。
此时此刻单纯用这几个是没办法看出效果来的, 需要借助景深或者叫透视 perspecitve 来完成。
perspective: 景深、透视
perspective:
perspective:600px;=> 需要加在旋转变形的父容器上, 数值越大，相当于离他的距离越大。具体的可以自己去尝试。
在使用景深的时候有一个注意点, 在使用 translateZ 的时候, 景深加在一个和自己宽高一样的父容器上的效果和加在一个比自己大的父容器上的效果不一样, 这是因为景深相当于我们始终在在父容器的中心点的位置去观看。这个自己去尝试就能明白了。
<style>
.box{
width: 600px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
perspective: 500px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
transform: translateZ(200px);
}
.box2{
width: 100px;
height: 100px;
border: 1px solid #ccc;
perspective: 500px;
}
.box3{
width: 100px;
height: 100px;
/* 背景透明 文字不透明 */
background-color: rgba(0, 0, 255, .1);
transform: rotateY(180deg) translateZ(500px);
}
</style>
<body>
<div class=”box”>
<div class=”box1″></div>
<div class=”box2″>
<div class=”box3″></div>
</div>
</div>
</body>
我们所能看到的物体大小, 取决于我们的视野能看到的多少。
<style>
div.box1{
perspective:600px;
// 注意景深是加在父元素上的
}
div.box2{
width:100px;
height:100px;
background-color:red;
transform:rotateX(60deg) rotateY(60deg);
// 如果需要多个属性一个用 用空格分开即可。也可以用 rotate3D(x,y,z,edg); 复合属性
}
</style>
<body>
<div class=”box1″>
<div calss=”box2></div>
</div>
</body>
translate：移动
translateX:
transform:translateX(100px);=> 图片正方向的左边移动 100px, 也就是我们的右边不要以为始终是是数学数轴的 X 轴方向。会根据图片的正方向来决定的
如果图片 rotateX(180deg) 旋转了 180 度, 那么图片的正方向发生改变, 并且图片此时是背对着我们的, 所以他 translateX 还是他的左边移动, 但是也是我们的左边了。
translateY:
transform:translateY(100px);=> 图片自己的下方移动 100px。也是一样根据自己图片当前的朝向而变化。
如果图片 rotateX(180deg) 那么图片底部就朝上了 (相当于你自己 180 度旋转了)。那么移动的方向就是我们看到的往上移动, 但是是图片自己的底部。
translateZ:
transform:translateZ(100px);=> 相当于往图片自己的正方向冲, 也就是你往你的正前方冲了 100m, 看到的效果就相当于 100m 处有个人 看着你从 0~100 米的感觉。
一样如果 rotateX(180deg) 那么图片就是背对着我们, 那么他的正前方就是我们的正前方。translateZ 经常使用, 并且是结合景深使用的, 这里要多理解多练习这两个的配合, 把自己当做容器, 就好理解多了。这里和 perspective 配合使用的注意点上面已经写了。结合代码再看看。
transform-style:perseve-3d \ flate
transform-style:perseve-3d;=> 其中 flat 值为默认值，表示所有子元素在 2D 平面呈现。preserve-3d 表示所有子元素在 3D 空间中呈现。也就是说你要从 3D 视觉去看这个组合体还是 2D 的视觉。比如我们要做一个魔方的时候就需要用到这个 3D 视觉, 也可以理解为只要这个 ` 组合体 ` 需要旋转, 就需要这个属性。
更多的还是需要结合代码修改练习, 去体会。本文如果有不对之处还请各位指教。感谢！