53.css-3d

之前css写的一个选择木马的效果,有用到transform,transform-style,animation,animation-play-state,keyframes 等属性

1.准备盒子

准备一个容器,和6个选择模块 ,一个中心模块 先全放在一起

 /* body开始3d和调整视距 */
        body {
            margin: 0;
            padding: 0;
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .box {
            /* 主容器大小 和位置 */
            position: relative;
            width: 300px;
            height: 200px;
            margin: 200px auto;
        }
       .box div:nth-child(7) {
         /* 中间盒子背景 */
            background: url(./02-妗堜緥/media/pig.jpg);
        }


        .box div {
            /* 子模块大小和背景图,位置 */
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(./02-妗堜緥/media/dog.jpg) no-repeat;
        }

    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

调整位置

将主容器向下旋转30°,6个子盒子分别沿y轴旋转60°(平分360°),然后推出去

        .box {
            transform: rotateX(-30deg);
        }
                .box div:nth-child(1) {
            transform: translateZ(300px);
        }

        .box div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }

        .box div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }

        .box div:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }

        .box div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }

        .box div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }

添加动画

        @keyframes rotate {
            0% {
                transform: rotateX(-30deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(-30deg) rotateY(360deg);
            }
        }
        .box {
            animation: rotate 10s infinite linear;
        }
          

添加hover停止动画

        .box:hover {
            /* 鼠标放入section 停止动画 */
            animation-play-state: paused;
        }