f370125417/mingming.github.io

<div class="box-a">


    <span id="in-front">

          <img src="./img/微信图片_20210811170039.jpg" class="in-img">  

        </span>

    <span id="in-back">

           <img src="./img/微信图片_20210811170048.jpg" class="in-img">

        </span>

    <span id="in-left">

            <img src="./img/微信图片_20210811170056.jpg" class="in-img">

        </span>

    <span id="in-right">

            <img src="./img/微信图片_20210811170104.jpg" class="in-img">

        </span>

    <span id="in-top">

            <img src="./img/微信图片_20210811154313.jpg" class="in-img">

        </span>

    <span id="in-bottom">

             <img src="./img/微信图片_20210811170024.jpg" class="in-img">

        </span>


    <div class="out-front">

        <img src="./img/微信图片_20210811170024.jpg" class="out-img">

    </div>

    <div class="out-back">

        <img src="./img/微信图片_20210811170039.jpg" class="out-img">

    </div>

    <div class="out-left">

        <img src="./img/微信图片_20210811170048.jpg" class="out-img">

    </div>

    <div class="out-right">

        <img src="./img/微信图片_20210811170056.jpg" class="out-img">

    </div>

    <div class="out-top">

        <img src="./img/微信图片_20210811170104.jpg" class="out-img">

    </div>

    <div class="out-bottom">

        <img src="./img/微信图片_20210811154313.jpg" class="out-img">

    </div>

</div>

<style type="text/css"> * { padding: 0; margin: 0; } body { width: 100%; height: 100%; background-image: url(./image/bg2.gif); } .box-a span { display: block; position: absolute; width: 100px; height: 100px; top: 50px; left: 50px; } .box-a div { position: absolute; transition: all .4s; } .box-a { width: 200px; height: 200px; margin: 200px auto; animation: rotate 20s infinite; transform-style: preserve-3d; animation-timing-function: linear; } div .in-img { width: 100px; height: 100px; } div .out-img { width: 200px; height: 200px; } @keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } #in-front { transform: translateZ(50px); } #in-back { transform: translateZ(-50px); } #in-left { transform: rotateY(90deg) translateZ(50px); } #in-right { transform: rotateY(-90deg) translateZ(50px); } #in-top { transform: rotateX(90deg) translateZ(50px); } #in-bottom { transform: rotateX(-90deg) translateZ(50px); } .out-front { transform: translateZ(100px); } .out-back { transform: translateZ(-100px); } .out-left { transform: rotateY(90deg) translateZ(100px); } .out-right { transform: rotateY(-90deg) translateZ(100px); } .out-top { transform: rotateX(90deg) translateZ(100px); } .out-bottom { transform: rotateX(-90deg) translateZ(100px); } .box-a:hover .out-front { transform: translateZ(200px); } .box-a:hover .out-back { transform: translateZ(-200px); } .box-a:hover .out-left { transform: rotateY(90deg) translateZ(200px); } .box-a:hover .out-right { transform: rotateY(-90deg) translateZ(200px); } .box-a:hover .out-top { transform: rotateX(90deg) translateZ(200px); } .box-a:hover .out-bottom { transform: rotateX(-90deg) translateZ(200px); } </style>