CSS3 过渡、2D变形、3D变形、动画
- 一、过渡
- 二、2D变形 transform
- 1.移动 translate
- 2.缩放 scale
- 3. 旋转 rotate
- 4. 倾斜 skew
- 三、3D变形
- 1. rotateX（）rotateY（） rotateZ（）
- 2. 体会透视 perspective
- 3. translateX（） translateY（） translateZ（）
- 4. 开门大吉例子
- 5. backface-visibility
- 四、动画
- 例子：无缝滚动
一、过渡
为元素从一种样式变为另一种样式时添加效果。
transition: 过渡属性 花费时间 运动曲线 何时开始;
前两个值不可省略，运动曲线默认ease，合适开始默认0s立即开始可以省略。
注意：transition需要写在div里而不是hover里；多个属性设置不同时，用逗号隔开；需要描述所有属性变化时，过渡属性值为all。
<html> <head> <style> div { width: 200px; height: 200px; background-color: pink; transition: width 0.2s ease 0s,height 0.3s ease-in 1s; /* transition: all 0.6s ease 0s; */ } div:hover { width: 300px; height: 300px; } </style> </head> <body> <div></div> </html>
二、2D变形 transform
做元素的变形、位移、缩放，可以和transition结合使用。
1.移动 translate
用translate平移
transform: translate(x,y)
<html> <head> <style> div { width: 200px; height: 200px; background-color: pink; transition: all 0.5s; } div:active { /*鼠标点击没有松开鼠标，相当于点击*/ transform: translate(100px,200px); transform: translate(50%,100%); } </style> </head> <body> <div></div> </html>
注意：
-
只移动一个坐标可以把另一个坐标设为0；
-
也可以写成：translateX（只跟一个参数）；translateY（只跟一个参数）。
-
translate移动的距离如果是%，则以自己的宽度为准，而不是父亲为准。
<html> <head> <style> div { width: 200px; height: 200px; background-color: pink; position: absolute; /*盒子居中对齐*/ left: 50%; /*以父级宽度为准*/ margin-left: -100px; /*需要计算*/ top: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div></div> </html>
2.缩放 scale
transform: scale(x,y)
x和y的值小于1为缩小倍数，大于1为放大倍数。
<html> <head> <style> div { width: 200px; height: 200px; background-color: pink; } div:hover { transform: scale(1.2,1.5); } </style> </head> <body> <div></div> </html>
注意：
-
如果只写一个参数，宽高都缩放！
-
谁做动画，谁加过渡！
<html> <head> <style> div { width: 100px; height: 50px; background-color: pink; overflow: hidden; } div img { transition: all 0.3s; } div:hover img { transform: scale(1.2,1.5); } </style> </head> <body> <div> <img src="images/search.png" alt=""> </div> </html>
3. 旋转 rotate
transform: rotate(*deg)
正值是顺时针，负值是逆时针；比如90deg是顺时针旋转90度
<html> <head> <style> div { width: 100px; height: 50px; background-color: pink; overflow: hidden; } div img { transition: all 0.3s; } div:hover img { transform: rotate(90deg); } </style> </head> <body> <div> <img src="images/search.png" alt=""> </div> </html>
旋转中心点的设置：
<html> <head> <style> div img { padding: 200px; transition: all 0.3s; transform-origin: bottom top; } div:hover img { transform: rotate(90deg); } </style> </head> <body> <div> <img src="images/search.png" alt=""> </div> </html>
4. 倾斜 skew
transform: skew(x,y);
<html> <head> <style> div { font-size: 50px; font-weight: 700; transition: all 0.2s; } div:hover { transform: skew(20deg,0); } </style> </head> <body> <div> 123 </div> </html>
三、3D变形
3D多了z轴，遵循左手法则。
1. rotateX（）rotateY（） rotateZ（）
<html> <head> <style> div img { transition: all 0.2s; } div:hover img { transform: rotateX(180deg); } </style> </head> <body> <div> <img src="images/course.png" alt=""> </div> </html>
2. 体会透视 perspective
- 透视原理：近大远小。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
<html> <head> <style> div { perspective: 1000px; } div img { transition: all 0.2s; } div:hover img { transform: rotateX(180deg); } </style> </head> <body> <div> <img src="images/course.png" alt=""> </div> </html>
3. translateX（） translateY（） translateZ（）
Z轴是物体到屏幕的距离，透视是一种展示形式。
<html> <head> <style> div { margin: 200px; perspective: 1000px; } div img { transition: all 0.2s; } div:hover img { transform: translateZ(100px); } </style> </head> <body> <div> <img src="images/course.png" alt=""> </div> </html>
transform: translate3d(x,y,z);
z轴只能是px单位。
<html> <head> <style> div { margin: 200px; perspective: 1000px; } div img { transition: all 0.2s; } div:hover img { transform: translate3d(100px,100px,100px); } </style> </head> <body> <div> <img src="images/course.png" alt=""> </div> </html>
4. 开门大吉例子
<html> <head> <style> div { width: 200px; height: 180px; margin: 200px; background: url(images/course.png); perspective: 1000px; position: relative; } span { display: block; width: 100px; height: 180px; background-color: pink; border: 1px solid black; transition: all 0.2s; } span.door-l { position: absolute; top: 0; left: 0; transform-origin: left; } span.door-r { position: absolute; top: 0; right: 0; transform-origin: right; } div:hover .door-l { transform: rotateY(-130deg); } div:hover .door-r { transform: rotateY(130deg); } </style> </head> <body> <div> <span class="door-l"></span> <span class="door-r"></span> </div> </html>
5. backface-visibility
用于设置图片不正向对着屏幕时是否可见。
可以用来写翻转图片，先translateY（180deg），当backface-visibility：hidden可以实现翻转时显示背面图片。
四、动画
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向；
动画名称是自定义的
<html> <head> <style> div { width: 200px; height: 180px; margin: 200px; background: url(images/course.png); /*animation: name duration timing-function delay iteration-count direction fill-mode;*/ animation: go 2s ease 0s 2 reverse; } @keyframes go { /*定义动画*/ from{ transform: translate(0); } to{ transform: translate(600px); } } </style> </head> <body> <div> </div> </html>
例子：无缝滚动
<html> <head> <style> * { margin: 0; padding: 0; } ul { list-style: none; } nav { width: 1200px; height: 20px; } nav li { float: left; } nav ul { width: 200%; /*两倍！！！*/ animation: moving 2s linear infinite; } div { width: 200px; height: 20px; } @keyframes moving { /*定义动画*/ from{ transform: translate(0); } to{ transform: translate(-1000px); } } nav:hover ul { /*鼠标经过nav，里面的ul不做动画*/ animation-play-state: paused ; } </style> </head> <body> <nav> <ul> <li><div style="background-color: red;"></div></li> <li><div style="background-color: orange;"></div></li> <li><div style="background-color: yellow;"></div></li> <li><div style="background-color: green;"></div></li> <li><div style="background-color: blue;"></div></li> <li><div style="background-color: purple;"></div></li> <li><div style="background-color: red;"></div></li> <li><div style="background-color: orange;"></div></li> <li><div style="background-color: yellow;"></div></li> <li><div style="background-color: green;"></div></li> <li><div style="background-color: blue;"></div></li> <li><div style="background-color: purple;"></div></li> </ul> </nav> </html>
