【html+css】旋转相册

最新推荐文章于 2024-07-25 11:52:30 发布

Lydia.na

最新推荐文章于 2024-07-25 11:52:30 发布

阅读量419

点赞数

本文链接：https://blog.csdn.net/m0_52427832/article/details/119573660

版权

【html+css】旋转相册

做了一个下午，用到了变形，把六张重叠在一起的图片进行旋转平移构成一个正方体。然后再自定义旋转的方向。

html部分
图片路径自己可改一下

<!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>动漫相册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item front"><img src="images/1.jpg" width="100%"></div>
        <div class="item back"><img src="images/2.jpg" width="100%"></div>
        <div class="item left"><img src="images/3.jpg" width="100%"></div>
        <div class="item right"><img src="images/4.jpg" width="100%"></div>
        <div class="item top"><img src="images/5.jpg" width="100%"></div>
        <div class="item bottom"><img src="images/6.jpg" width="100%"></div>
    </div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(images/bg.jpg) no-repeat ;
    background-size: 100% 100%;
}
.container{
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    animation: rotate 6s linear alternate infinite;
}
.container .item{
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.9;
}
.container .front{
    transform: translateZ(150px);
}
.container .back{
    transform: rotateY(180deg) translateZ(150px);
}
.container .left{
    transform: rotateY(-90deg) translateZ(150px);
}
.container .right{
    transform: rotateY(90deg) translateZ(150px);
}
.container .top{
    transform: rotateX(90deg) translateZ(150px);
}
.container .bottom{
    transform: rotateX(-90deg) translateZ(150px);
}
@keyframes rotate{
    0%{
        transform: rotateY(90deg);
    }
    20%,25%{
        transform: rotateY(180deg);
    }
    40%,45%{
        transform: rotateY(270deg);
    }
    60%,65%{
        transform: rotateX(-90deg);
    }
    80%,85%{
        transform: rotateX(0deg);
    }
    95%,100%{
        transform: rotateX(90deg);
    }
}