以前就想学CSS3动画,觉得挺高级的,但后来因为一些原因,没能理解好,也没有时间,最近重新学了一波。为了帮助那些像我一样理解能力不太好的人(同时也使自己更好的理解知识点),这里做一下总结。主要是我在学习过程中遇到的一些问题,如果有写的不清晰的,希望大家能够指正。
一、perspective设置透视:
如上图所示透视可以理解成图中的d,即眼睛到显示屏的距离,当透视的值变小,可以理解成人走进了去看物体,那么物体就变大了;
注意:在设置时,perspective要加到父级盒子里面,eg:perspective:500px;
二、translateZ与perspective
首先,来说一说这个translateZ,如上图所示,translateZ就相当于z,在父级元素加了透视的情况下(视距d一定),z越大,看到的物体越大(当z>d的时候就看不到物体了);
三、translateZ与rotate
说实话,之前我也不是很懂这个旋转与translateZ,以为translateZ不会随着rotate的改变而改变,后来我看了看大佬的博客,发现这个一起改变的;举个例子,如果是你开始是正视物体的话,那么rotateX(-90deg)得到的将是下面的图片:
那么具体rotate的方向是如何来确定的呢?—— "左手定理”
四、立方盒子的搭建方法
方法一:
附上源码:
div[class^="box"] {
/*将6张图片叠在一起*/
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.6;
/*观察内层的图片*/
background-color: rgb(228, 111, 173);
}
.box1 {
background-image: url("./images/1.jpg");
transform: translateZ(100px);
}
.box2 {
background-image: url("./images/2.jpg");
transform: translateZ(-100px);
}
.box3 {
background-image: url("./images/3.jpg");
transform: translateX(-50%) rotateY(-90deg);
}
.box4 {
background-image: url("./images/7.jpg");
transform: translateX(50%) rotateY(90deg);
}
.box5 {
background-image: url("./images/5.jpg");
transform: translateY(50%) rotateX(-90deg);
}
.box6 {
background-image: url("./images/6.jpg");
transform: translateY(-50%) rotateX(90deg);
}
方法二:
附上源码:
#outerbox {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
/*保留子级元素的3D变换*/
transition: all 2s ease;
}
/*属性选择器^=选择以“**”开头的标签*/
div[class^="box"] {
/*将6张图片叠在一起*/
position: absolute;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.6;
/*观察内层的图片*/
background-color: rgb(228, 111, 173);
}
.box1 {
background-image: url("./images/1.jpg");
transform: translateZ(100px);
}
.box2 {
background-image: url("./images/2.jpg");
transform: translateZ(-100px);
}
.box3 {
background-image: url("./images/3.jpg");
transform: rotateY(-90deg) translateZ(100px);
}
.box4 {
background-image: url("./images/7.jpg");
transform: rotateY(90deg) translateZ(100px);
}
.box5 {
background-image: url("./images/5.jpg");
transform: rotateX(-90deg) translateZ(100px);
}
.box6 {
background-image: url("./images/6.jpg");
transform: rotateX(90deg) translateZ(100px);
}
五、关于其中的translate充当定位的使用
相比于传统的margin,一般情况下translate定位有效的防止布局混乱,但是我在使用的时候也发现了一个问题,恰恰margin正常,translate会发生布局紊乱。在用margin布局的时候,如果margin所相对的那个元素发生了移动(或者删除,排除 “visibility: hidden;”的情况)就容易造成混乱,这样就体现出了translate的优势了;但是,我用这个的时候意外发现,这个translate在元素发生旋转的时候也会造成布局紊乱,经过测试发现,得到如下结论:
六、transition的使用
transition不仅仅是 transition all 3s ease;transition里面还有一个transition-property,使用方法如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition的使用</title>
<style>
/*设置body样式,防止height默认为0,方面子级元素利用百分号来定义宽高*/
html.body {
width: 100%;
height: 100%;
}
#mydiv {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: rgb(81, 197, 58);
border: 1px red solid;
transition: width 2s ease, height 3s ease, background-color 3s ease;
}
#mydiv:hover {
width: 400px;
height: 400px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
七、animation 和 transition 的区别分析
1、transition,“谁做动画给谁加”,通常需要配合hover等事件(或者配合js修改对应标签的属性)来触发,而animation不需要其他事件辅助,能直接使用;
2、animation 配合 @keyframe 可以设置很多不同的中间状态,而transition只能设置起始两种状态;
3、animation 可以设置很多的属性,比如循环次数,动画结束的状态等等,但是transition 只能触发一次(只有四个属性,即动画属性+动画时长+动画速度+动画延时);
4、在性能方面:浏览器有一个主线程和排版线程;主线程一般是对 js 运行的、页面布局、生成位图等等,然后把生成好的位图传递给排版线程,而排版线程会通过 GPU 将位图绘制到页面上,也会向主线程请求位图等等;我们在用使用 aniamtion 的时候这样就可以改变很多属性,像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起,页面的回流和重绘,对性能影响就比较大,但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图,当然也就不会引起页面的重排了;