1.2d 动画
属性:
transform | 适用于2D或3D转换的元素 |
transform-origin | 允许更改转换元素位置 |
转换方法:
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
2.3d 动画
属性:
transform | 向元素应用2D或3D转换 |
transform-origin | 允许改变被转换元素的位置 |
transform-style | 规定被嵌套元素在3D空间中如何显示 |
perspective | 规定3D元素透视效果 |
perspective | 规定3D元素底部位置 |
backface-visibility | 定义元素在不面对屏幕时是否可见 |
转换方法:
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用16个值的矩阵。 |
translate3d(x,y,z) | 定义 3D 转换 |
translateX(x) | 定义 3D 转换,仅使用用于X轴的值。 |
translateY(y) | 定义 3D 转换,仅使用用于Y 轴的值。 |
translatez(n) | 定义3D转换,仅使用用于Z轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个X轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个Y轴的值。 |
scalez(z) | 定义3D缩放转换,通过给定一个z轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转. |
rotateX(angle) | 定义 沿X轴的3D转换。 |
rotateY(angle) | 定义沿Y轴的3D转换。 |
rotateZ(angle) | 定义沿Z轴的3D转换。 |
perspective(n) | 定义3D转换元素的透视视图。 |
属性解释:
transform (2d、3d转换)
translate(平移x,y,z)
rotate(旋转x,y,z)
skew(变形 deg)
scale(伸缩 w,h)
translate 默认x
rotate 默认旋转z轴为旋转中心
3.创建动画
@keyframes属性:animation
下面我们来展示一个实例:
(1)创建一个视觉上的2d球体
<body>
<div class="sqpar">
<div class="sq sq1"></div>
<div class="sq sq2"></div>
<div class="sq sq3"></div>
<div class="sq sq4"></div>
<div class="sq sq5"></div>
<div class="sq sq6"></div>
<div class="sq sq7"></div>
<div class="sq sq8"></div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background: black;
}
.sq{
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
border: 1px dashed #fff;
}/*给到统一样式将形状变成圆环。*/
.sq2{
transform: rotatey(30deg);/*绕y轴旋转30度*/
}
.sq3{
transform: rotatey(60deg);/*绕y轴旋转60度*/
}
.sq4{
transform: rotatey(90deg);/*绕y轴旋转90度*/
}
.sq5{
transform: rotatey(120deg);/*绕y轴旋转120度*/
}
.sq6{
transform: rotatey(150deg);/*绕y轴旋转150度*/
}
</style>
效果展示:
(2)2d效果转为3d效果
在sqpar样式中添加代码:
.sqpar{
transform-style:preserve-3d; /*2d转3d*/
}
(3)创建动画效果
.sqpar{
animation: sq_animate 3s linear infinite;
}
@keyframes sq_animate {
from {
transform: rotatey(0deg);
}
to{
transform: rotatey(360deg);
}
}
注意:@keyframes 设置的便是动画效果,若想给哪个对象加上该效果,则用admition属性 ,其后加上@keyframes同名样式名,如上代码中的sq_animate.
经过上述3步,一个转动的框架球就出现啦。效果如下(静态图是有些看不粗来~~~)