因为知识点都需要循循渐进，故css3的一些3D特效、伸缩布局等放此处讲解
transform属性
我们可以通过transform去设置2D 3D动画，当然也需要配合transition，不然呈现过渡的效果。
平移
我们来看看几种写法
- transform:translate(200px,200px); 表示X轴上平移200px，Y轴上平移200px
- transform:translateX(20px) 表示X轴上平移20px
- transform:translateY(20px) 表示Y轴上平移20px
- transform:translateZ(20px) 表示Z轴上平移20px
- transform:translate3d(20px,20px,20px)
翻转
同样的我们来了解一下几种写法及对应的效果（deg表示度数）
- transform：rotate（90deg） 表示平面水平旋转90°
- transform：rotateX（90deg） 表示沿着X轴旋转90°
- transform：rotateY(90deg) 表示沿着Y轴旋转90°
- transform：rotateZ(90deg) 表示沿着Z轴旋转90°
缩放
- transform：scale(x,y) /scale(x)=scale(x,x)
- transform：scaleX(x)
- transform：scaleY(y)
x表示水平,y表示竖直方向的缩放，0-1表示缩小，大于1表示方法，等于1不变
下面是demo
因为简单直接上源代码吧
<title>Document</title>
<style>
div {
width: 260px;
height: 180px;
border: 1px solid #ccc;
margin: 180px auto;
position: relative;
}
div img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.6s;
transform-origin: right top;
}
/*鼠标放到div上 每个图片都旋转一定的角度*/
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(1) {
transform: rotate(60deg);
}
</style>
</head>
<body>
<div>
<img src="img/6.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/1.jpg" alt="">
</div>
</body>
</html>利用translate让视图居中
很多时候，我们不知道视图的高度，那么就没法使用top+marginTop的方式去居中，但是我们可以使用translateY的方式具体如下
top:50%;
transform:translateY（-50%）因为translateY的百分比参照的是自身的高度，所以我们可以使用translateY去替代marginTop
两面翻转
这里的两面翻转指的是正面一张图片，翻转到背面也是一张图片先来看看效果图吧
让我们先来了解一下两个属性
backface-visibility：hidden
transform-style：preserve-3d
第一个属性表示：当选择的时候，如果不是正面对准屏幕则会隐藏。也就是说当旋转超过90°则会隐藏。
第二个属相表示：保留该视图空间的大小，不随3d动画变化而变化。怎么理解，当视图旋转到了90°，是不是就变成了一条线，那么所占的空间就变小了，就是为了防止该情况。
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div img:nth-child(1) {
z-index: 1;
/*当不是正面对向屏幕 隐藏*/
backface-visibility: hidden;
-webkit-backface-visibility:hidden; /* Chrome 和 Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden;
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="img/qian.svg" alt="">//前面的图片
<img src="img/hou.svg" alt="">//后面的图片
</div>
</body>css3自定义动画
到目前为止，我们通过样式去设置动画，都是通过transition的过渡动画来实现，且动画效果有限，无法实现组合效果，那么现在我们来学习一下css3的自定义动画，可以解决该问题。
@keyframes
@keyframes 该标签表示自定义动画的样式。具体使用如下
1：@keyframes move{//move表示样式名字
from{ }// from表示动画起始值
to{ }//to 表示终止的值
}
2：@keyframes run{//run表示样式名字
0%{ }
25%{ }
50%{ }
75%{ }
100%{ }
}//上面的百分比都是相对总的动画时间，可以理解为多断动画 0%-25% 25%-50% 50%-75% 75%-100%
有了动画的样式，还需要条用该样式，这时候就需要用到animation
animation
基本参数如下 animation：run 2s ease 0s infinite alternate
动画名称/动画执行时间/动画速率/动画延迟时间/无限次数/是否反方向
那么接下来我们将两者结合使用
<style>
div {
width: 120px;
height: 120px;
margin-bottom: 20px;
background: skyblue;
/*perspective: */
}
div:nth-child(1) {
/*让div执行动画*/
/*动画名称 动画时间 运动曲线 何时开始 无限次数 是否反方向*/
animation: move 2s ease 0s infinite alternate;
}
div:nth-child(2) {
animation: run 4s infinite;
}
/* 定义动画 */
@keyframes move{
from {
transform: translate(0)
}
to {
transform: translate(300px)
}
}
/*定义第二个盒子动画*/
@keyframes run {
0% {
transform: translate3d(0,0,0);
}
25% {
transform: translate3d(600px,0,0);
}
50% {
transform: translate3d(600px,300px,0);
}
75% {
transform: translate3d(0,300px,0);
}
100% {
transform: translate3d(0,0,0);
}
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>同样的我们开可以使用animation实现无缝滚动，不需要js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div ul {
width: 200%;
list-style: none;
animation: move 4s linear infinite;
}
div {
width: 504px;
height: 86px;
margin: 200px auto;
border: 1px solid pink;
overflow: hidden;
}
div:hover ul {
animation-play-state: paused;
}
ul li {
float: left;
}
@keyframes move {
from {
transform: translate(0)
}
to {
transform: translate(-504px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/nav1.jpg" alt=""></li>
<li><img src="img/nav2.jpg" alt=""></li>
<li><img src="img/nav3.jpg" alt=""></li>
<li><img src="img/nav4.jpg" alt=""></li>
<li><img src="img/nav1.jpg" alt=""></li>
<li><img src="img/nav2.jpg" alt=""></li>
<li><img src="img/nav3.jpg" alt=""></li>
<li><img src="img/nav4.jpg" alt=""></li>
</ul>
</div>
</body>
</html>animation-play-state: paused; 暂停动画，配合hover使用，当鼠标在其上面则动画暂停。