HTML+CSS实现3D旋转相册
介绍
在前几篇博客中介绍了transform的属性，那么再经过几天的学习之后，现在对transform的属性有了更多了理解，同时也通过自己的想法，完成了下面的作品： 实现一个3D的旋转相册
代码
废话不多说，直接上代码吧~
<!--
* @Author: OriginalCoder
* @Date: 2020-10-29 12:39:14
* @version:
* @LastEditTime: 2020-10-29 13:59:12
* @LastEditors: OriginalCoder
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>3D旋转相册 | ITWCN</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(#ccc, rgb(156, 211, 211));
}
.container {
width: 300px;
height: 300px;
position: relative;
/* 样式 */
transform-style: preserve-3d;
/* transform: rotateX(-20deg) rotateY(-20deg); */
animation: rotate 10s linear alternate infinite;
}
.container .item {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.7s;
box-shadow: 0 0 10px #000000;
}
img {
width: 300px;
height: 300px;
}
/* img:hover {
width: 400px;
height: 400px;
} */
.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%,
5% {
transform: rotateY(90deg);
}
20%,
25% {
transform: rotateY(180deg);
}
40%,
45% {
transform: rotateY(270deg);
}
60%,
65% {
transform: rotateX(-90deg);
}
80%,
85% {
transform: rotateX(0);
}
95%,
100% {
transform: rotateX(90deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="item front"><img src="./images/1.jpg" alt="" /></div>
<div class="item back"><img src="./images/1.jpg" alt="" /></div>
<div class="item left"><img src="./images/1.jpg" alt="" /></div>
<div class="item right"><img src="./images/1.jpg" alt="" /></div>
<div class="item top"><img src="./images/1.jpg" alt="" /></div>
<div class="item bottom"><img src="./images/1.jpg" alt="" /></div>
</div>
</body>
</html>
上一篇：
IDEA上Java项目控制台中文乱码