一 需求描述:
实现圆环的3D旋转效果,圆环是正圆形的
二 代码示意:
<!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>
#first{
border:green 1px solid;
width: 500px;
height: 300px;
/* 透视给父类加上,但是实际上作用在子类上 */
perspective:100px;
transform: rotateX(45deg);
}
#second{
border:pink 1px solid;
width: 450px;
height: 300px;
/* 调整偏移角度 */
transform: rotateX(5deg);
}
#third{
border:red 1px solid;
width: 400px;
height: 300px;
/*animation (动画) :绑定选择器, 4s完成动画 linear(匀速) infinite(循环) */
animation: que 4s linear infinite;
}
@keyframes que {
/*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
0%{
/*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<img src="images/index.png">
</div>
</div>
</div>
</body>
</html>