CSS3的3D旋转

CSS3的3D旋转

沿着y轴方向逆时针旋转

这是图中旋转的图片

代码

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: rgb(0, 13, 83);
        }
        
        @keyframes turn{
            0%{  -webkit-transform:perspective(800px) rotateX(60deg)  rotateZ(0deg)  }
            25%{ -webkit-transform:perspective(800px) rotateX(60deg)  rotateZ(90deg)}
            50%{ -webkit-transform:perspective(800px) rotateX(60deg)  rotateZ(180deg)}
            75%{ -webkit-transform:perspective(800px) rotateX(60deg)  rotateZ(270deg)}
            100%{-webkit-transform:perspective(800px) rotateX(60deg)  rotateZ(360deg)}
        }
        .bottomimg{
          
            width: 600px;
            height: 600px;
            margin: 50px auto;
            transform-style: preserve-3d;
        }
        img{
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            /* 先将圆形沿x轴倾斜45度 */
            transform: perspective(800px) rotateX(45deg);
            animation: turn 1s;
            /* 无限循环动画 */
            animation-iteration-count: infinite;
            
        }
    </style>
    <div class="map">
        <div class="bottomimg">
            <img src="img/222.png" alt="">
        </div>
    </div>