css+html实现立方体相册

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>cube</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body {
    background: #333;
}

ul {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /*3d空间*/
    transform-style: preserve-3d;
    animation: box 20s linear infinite;
}

@keyframes box {

    /*3d旋转 x y z deg*/
    from {
        transform: rotate3d(0, 0, 0, 0deg);
    }

    to {
        transform: rotate3d(1, 1, 1, 360deg);
    }
}

li {
    width: 300px;
    height: 300px;
    list-style: none;
    border: 1px solid black;
    position: absolute;
    opacity: 0.8;
    box-shadow: 0px 0px 10px white;
}

li:nth-child(1) {
    background: url(./../../正面.jpg);
    background-position: center;
    background-size: cover;
    transform: translateZ(150px);
}

/*后*/
li:nth-child(2) {
    background: url(./../../反面.jpg);
    background-position: center;
    background-size: cover;
    transform: translateZ(-150px);
}

/*左*/
li:nth-child(3) {
    background: url(./../../xuanjiezhimou.jpg);
    background-position: center;
    background-size: cover;
    transform: rotateY(90deg) translateZ(-150px);
}

/*右*/
li:nth-child(4) {
    background: url(./../../码上说故事_690.jpeg);
    background-position: center;
    background-size: cover;
    transform: rotateY(90deg) translateZ(150px);
}

/*上*/
li:nth-child(5) {
    background: url(./../../1.jpg);
    background-position: center;
    background-size: cover;
    transform: rotateX(90deg) translateZ(150px);
}

li:nth-child(6) {
    background: url(./../../3.PNG);
    background-position: center;
    background-size: cover;
    transform: rotateX(90deg) translateZ(-150px);
}

ul:hover {
    animation-play-state: paused;
}
</style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>        
————————————————
版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938
    </body>
</html>

————————————————
版权声明：本文为CSDN博主「一殿」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41866776/article/details/96695938

css+html实现立方体相册

猜你喜欢