css3 3D旋转 循环自转

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20757489/article/details/88236176

css3D旋转

.transform3D{
            transform: perspective(875px) rotateX(25deg) translate3d(0,0,0);
            transition: all .85s .05s linear;
        }

css循环自转

 .backButton{
            background: url("../img/back.png") top center no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
            width: 146px;
            height: 146px;
            position: absolute;
            top: 43px;
            right: 100px;
            -webkit-animation: rotate360 5s linear infinite;
            -o-animation: rotate360 5s linear infinite;
            animation: rotate360 5s linear infinite;
        }

        @keyframes rotate360 {
            from{
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
            }
            to{
                transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
                -moz-transform: rotate(-360deg);
                -o-transform: rotate(-360deg);
                -ms-transform: rotate(-360deg);
            }
        }