css3+html5之3D照片墙及其注意事项

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            display:block;
            width: 215px;
            height: 215px;
        }
        .box{
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            transform:  rotateX(-34deg) rotateY(-30deg) ;
            width: 226px;
            margin:250px auto;
            height: 226px;
        }
        .a,
        .b,
        .c,
        .d,
        .e,
        .f{
            width: 226px;
            height: 226px;
            background-color: rgb(230,230,229);
            padding: 5px;
            position: absolute;
            transition: all 2s;
            transform-origin: bottom;
        }
        .a:hover{transform:  rotateY(60deg)translateZ(300px) scale(1.5)}
        .b:hover{transform:  rotateY(120deg) translateZ(300px) scale(1.5)}
        .c:hover{transform:  rotateY(180deg) translateZ(300px) scale(1.5)}
        .d:hover{transform:  rotateY(240deg) translateZ(300px) scale(1.5)}
        .e:hover{transform:   rotateY(300deg) translateZ(300px) scale(1.5)}
        .f:hover{transform:  rotateY(360deg) translateZ(300px) scale(1.5)}
        .a{
           transform:  rotateY(60deg)translateZ(300px)  ;
        }
        .b{
            transform: rotateY(120deg) translateZ(300px) ;
        }
        .c{
            transform:  rotateY(180deg) translateZ(300px);
        }
        .d{
            transform:  rotateY(240deg) translateZ(300px);
        }
        .e{
            transform:  rotateY(300deg) translateZ(300px);
        }
        .f{
            transform:  rotateY(360deg) translateZ(300px);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="a"><img src="img/1.jpg" alt=""></div>
    <div class="b"><img src="img/2.jpg" alt=""></div>
    <div class="c"><img src="img/3.jpg" alt=""></div>
    <div class="d"><img src="img/4.jpg" alt=""></div>
    <div class="e"><img src="img/5.jpg" alt=""></div>
    <div class="f"><img src="img/6.jpg" alt=""></div>
</div>
</body>
</html>
注意:在hover和布局位置的时候一定要按照先旋转在位移最后放大缩小的顺序否则会出现错误
css3+html5之3D照片墙及其注意事项

猜你喜欢
