本文主要是介绍css动画实现转盘旋转,css3实现倾斜转动的转盘，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML代码：
CSS代码：
.r-1{
border: 1px solid red;
text-align: center;color: #ffffff;line-height: 500px;vertical-align: middle;font-size: 50px;;
position: absolute;
500px;height: 500px;
top:0px;left:620px;
background-image: url("resoureces/a.png");
background-size: 100% 100%;
background-repeat: no-repeat;
animation: circleSmall 10s linear infinite;
}
.r-2{
border: 1px solid red;
text-align: center;color: #ffffff;line-height: 500px;vertical-align: middle;font-size: 50px;;
position: absolute;
500px;height: 500px;
top:0px;left:20px;
background-image: url("resoureces/a.png");
background-size: 100% 100%;
background-repeat: no-repeat;
animation: circleSmall2 10s linear infinite;
}
/*旋转动画*/
@-webkit-keyframes circleSmall{
0%{
transform: rotateX(30deg) rotateY(-10deg) rotateZ(0deg);
}
100%{
transform: rotateX(30deg) rotateY(-10deg) rotateZ(360deg);
}
}
@-webkit-keyframes circleSmall2{
0% {
-webkit-transform: rotate3d(0,0,.2,0deg);
}
100% {
-webkit-transform: rotate3d(0,0,.2,360deg);
}
}
这篇关于css动画实现转盘旋转,css3实现倾斜转动的转盘的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
