简单的立体相册制作

嗜好丶.

已于 2023-03-15 20:51:26 修改

阅读量87

点赞数

文章标签： css css3 html

于 2022-11-13 21:39:40 首次发布

本文链接：https://blog.csdn.net/hjw1001/article/details/127837919

版权

立体相册
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

 <style>
        @keyframes donghua{
            from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

            }to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
        }

     body{perspective: 800px;}      
     
     .hjw{
            transform:rotate3d(1,1,1,45deg);

            width: 200px;height: 200px;
            position: relative;
            margin: 300px auto;
            transform-style: preserve-3d;
            animation: donghua 10s infinite linear;
        }

       .hjw > img{width: 200px;height: 200px;
                  position: absolute;}

       .hjw:hover > img:first-child{
           transform:translateZ(-100px);
       }

        .hjw:hover > img:nth-child(2){
            transform: translateX(-100px)rotateY(90deg);
        }

        img:nth-child(2){
            left: -200px;
            transform: rotateY(90deg);
            transform-origin: right;
            }

        .hjw:hover > img:nth-child(3){
            transform: translateX(100px)rotateY(-90deg);
        }

        .hjw > img:nth-child(3){
            right: -200px;
            transform: rotateY(-90deg);
            transform-origin: left;
            }

        .hjw:hover > img:nth-child(4){
            transform: translateY(-100px)rotateX(-90deg);
        }

        .hjw > img:nth-child(4){
            top: -200px;
            transform: rotateX(-90deg);
            transform-origin: bottom;
            }

        .hjw:hover > img:nth-child(5){
            transform: translateY(100px)rotateX(90deg);
        }

        .hjw > img:nth-child(5){
            bottom: -200px;
            transform: rotateX(90deg);
            transform-origin: top;
            }

        .hjw:hover > img:nth-child(6){
            transform: translateZ(300px);
        }

        .hjw > img:nth-child(6){
            transform:translateZ(200px);
            }


    </style>



</head>
<body>
   
    <div class="hjw">
        <img src="1111.jpg" alt="">
        <img src="1111.jpg" alt="">
        <img src="1111.jpg" alt="">
        <img src="1111.jpg" alt="">
        <img src="1111.jpg" alt="">
        <img src="1111.jpg" alt="">
    </div>
</body>
</html>

1111.jpg
在这里插入图片描述
效果如图