HTML结构
创建index.html文件，如下。图片放在相对位置src文件夹下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕魔方照片墙 - 3D效果</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="photo-cube">
<div class="face front" style="background-image: url('src/微信图片_20230509130318.jpg'');"></div>
<div class="face back" style="background-image: url('src/微信图片_20230509130327.jpg');"></div>
<div class="face right" style="background-image: url('src/微信图片_20230509130332.jpg');"></div>
<div class="face left" style="background-image: url('src/微信图片_20230509130318.jpg');"></div>
<div class="face top" style="background-image: url('src/微信图片_20230509130327.jpg');"></div>
<div class="face bottom" style="background-image: url('src/微信图片_20230509130332.jpg');"></div>
</div>
</body>
</html>
CSS样式
创建styles.css文件
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
perspective: 1000px; /* 添加透视效果 */
}
.photo-cube {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d; /* 保持3D变换的上下文 */
animation: rotateCube 20s infinite linear; /* 应用动画 */
}
.face {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
border: 1px solid #ccc;
transition: transform 0.5s; /* 过渡效果 */
backface-visibility: hidden; /* 隐藏翻转时不可见的背面 */
}
.front { transform: translateZ(150px); }
.back { transform: rotateY(180deg) translateZ(150px); }
.right { transform: rotateY(90deg) translateZ(150px); }
.left { transform: rotateY(-90deg) translateZ(150px); }
.top { transform: rotateX(90deg) translateZ(150px); }
.bottom { transform: rotateX(-90deg) translateZ(150px); }
@keyframes rotateCube {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* 可以添加鼠标悬停效果来增强互动性 */
.photo-cube:hover .face {
transform: scale(1.05); /* 稍微放大 */
}写完后，双击index.html文件即可
