css3实现倾斜转动的转盘

佚名 7年前 (2019-05-08) 随笔 745人围观抢沙发百度已收录

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

HTML代码：

<div class="r-1">a</div>
<div class="r-2">a</div>

CSS代码：

        .r-1{
            border: 1px solid red;
            text-align: center;color: #ffffff;line-height: 500px;vertical-align: middle;font-size: 50px;;
            position: absolute;
            width: 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;
    width: 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);
     }
}