css3旋转动画

最新推荐文章于 2024-05-16 03:33:23 发布

那个男孩

最新推荐文章于 2024-05-16 03:33:23 发布

阅读量263

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/xzx66666/article/details/127637748

版权

.wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}

.figure {
width: 188px;
height: auto;
margin-left: 60px;
z-index: 2;
}

.circle {
position: absolute;
top: 55px;
width: 380px;
height: auto;
transform: rotateX(70deg);
-ms-transform: rotateX(70deg);
-webkit-transform: rotateX(70deg);
}

.circle-inner {
width: 250px;
top: 118px;
animation: counterclockwiseRevolve 15s linear infinite;
}

.circle-outer {
animation: revolve 15s linear infinite;
}

@keyframes revolve {
from {
transform: rotateX(70deg) rotateZ(0);
}
to {
transform: rotateX(70deg) rotateZ(360deg);
}
}

@-webkit-keyframes revolve {
from {
transform: rotateX(70deg) rotateZ(0);
}
to {
transform: rotateX(70deg) rotateZ(360deg);
}
}

@keyframes counterclockwiseRevolve {
from {
transform: rotateX(70deg) rotateZ(360deg);
}
to {
transform: rotateX(70deg) rotateZ(0deg);
}
}

@-webkit-keyframes counterclockwiseRevolve {
from {
transform: rotateX(70deg) rotateZ(360deg);
}
to {
transform: rotateX(70deg) rotateZ(0deg);
}
}
</style>