通过CSS 2D转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
<br>2D转换一共五个属性:transfrom=>
translate(X轴数值px，Y轴数值px):元素从其当前位置移动，根据给定的x坐标和y坐标位置参数，将元素移动到新的位置
<br>rotate(数值deg):元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转。
<br>scale(宽度数值，高度数值):元素的尺寸会增加或减少，根据给定的宽度和高度参数。
<br>skew(X数值deg，Y数值deg):元素翻转给定的角度，根据给定的X轴和Y轴参数，将元素围绕着X,Y轴翻转。
<br>matrix(n,n,n,n,n,n):可以设定所有的数值，不建议使用，容易混乱。
##CSS 3D转换##
3D转换，将比2D转换X,Y多出一个Z轴。
注：Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
<br>3D转换相应的属性=>
<br>transfrom-origin:(X轴数值，Y轴数值)改变元素被转换的位置，XY交叉部分定位被转换的位置，元素将依照这个位置进行变化.
<br>transfrom-style:规定被嵌套元素如何在3D空间中显示。
<br>perspective-origin:规定 3D 元素的底部位置。
<br>perspective-visibility:定义元素在不面对屏幕时是否可见=>
<br>（1）visible:默认，背面可见，类似透明。
<br>（2）hidden:背面不可见。
##过渡##
通过添加过渡效果，我们可以把一个元素从一种样式变成另外一种样式。
<br>初始属性{transition: 需要变化的位置（也可以设置全部all） 时间}
<br>注：如果不设定时长，则不会有过渡效果，因为默认值为0。
<br>初始属性{(背景颜色、边框大小等)+transition}=>初始属性:hover{背景颜色、边框大小等}
<br>注：鼠标移除元素时，它会逐渐变回原样。
###过渡属性###
transition:简写属性，用于在一个属性中设置四个过渡属性。
<br>transition-property:规定应用过渡的 CSS 属性的名称。
<br>transition-duration:定义过渡效果花费的时间。默认是 0。
<br>transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"=>
<br>(1)ease:渐快、匀速、减速
<br>(2)ease-in:渐快、匀速
<br>(3)ease-out:匀速、减速
<br>(4)ease-in-out:和ease类似，但比ease的加速增幅更大
<br>(5)linear:全程匀速
<br>transition-delay:规定过渡效果何时开始。默认是 0,直接开始。
<br>注：这些都将写在初始元素中。
##动画##
书写方式：
<br>@keyframes 名字{在一定时间的时候的样式，用%后跟{要求}显示}
<br>@keyframes用于创建动画
<br>注：0%（或form）是动画的开始，100%（或to） 是动画的完成。
<br>注2：@keyframes 名字，必须写在要求元素前，否色无效。
<br>@keyframes对应的元素中可以设定的标签=>
<br>animation:所有动画属性的简写属性，除了 animation-play-state 属性
<br>animation-name:规定 @keyframes 动画的名称。
<br>animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是 0。
<br>animation-timing-function:规定动画的速度曲线。默认是 "ease"。
<br>animation-delay:规定动画何时开始。默认是 0。
<br>animation-iteration-count:规定动画被播放的次数。默认是 1。
<br>animation-direction:规定动画是否在下一周期逆向地播放。默认是 "normal"。
<br>animation-play-state:规定动画是否正在运行或暂停。默认是 "running"。
<br>animation-fill-mode:规定对象动画时间之外的状态。
光说估计大家也不懂，我发个例子吧
<!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>
.big{
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
margin: 0 auto;
margin-top: 200px;
display: flex;
text-align: center;
align-items: center;
}
@keyframes wo{
0%{transform: rotate(45deg)}
25%{transform: rotate(135deg)}
50%{transform: rotate(215deg)}
75%{transform: rotate(305deg)}
100%{transform: rotate(395deg)}
}
.wu{
width: 300px;
height: 300px;
position: absolute;
margin-left: 530px;
margin-top: -250px;
transform: rotate(45deg);
animation-name: wo;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.mix{
width: 50px;
height: 50px;
border-radius: 50%;
background: blue;
}
.tx{
display: flex;
width: 300px;
height: 150px;
}
@keyframes hf{
0%{transform: scale(1.5,1.5)}
50%{transform: scale(1,1)}
100%{transform: scale(1.5,1.5)}
}
.a{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.s{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.d{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.f{
width: 150px;
height: 150px;
animation-name: hf;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#q{
float: left;
}
#w{
float: right;
}
#e{
float: left;
margin-top: 100px;
}
#r{
float: right;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="big"></div>
<div class="wu">
<div class="tx">
<div class="a"><div id="q" class="mix"></div></div>
<div class="s"><div id="w" class="mix"></div></div>
</div>
<div class="tx">
<div class="d"><div id="e" class="mix"></div></div>
<div class="f"><div id="r" class="mix"></div></div>
</div>
</div>
</body>
</html>
以上只是一个简单的例子，大家可以多多尝试各种元素组合书写。
原文地址：https://www.cnblogs.com/html-he-css/p/11011075.html