CSS3 彩色盒子翻转动画

原创已于 2025-06-27 15:39:14 修改 · 951 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-24 15:28:11 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 彩色盒子翻转动画</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f2f5;
font-family: 'Arial', sans-serif;
perspective: 1000px;
}

.flip-container {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
animation: flip 6s infinite ease-in-out;
margin: 50px auto;
}

.flip-box {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
color: white;
backface-visibility: hidden;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: all 0.8s ease;
}

.front {
background: linear-gradient(45deg, #FF416C, #FF4B2B);
transform: rotateY(0deg);
}

.back {
background: linear-gradient(45deg, #4776E6, #8E54E9);
transform: rotateY(180deg);
}

.right {
background: linear-gradient(45deg, #1D976C, #93F9B9);
transform: rotateY(90deg) translateZ(150px) translateX(150px);
}

.left {
background: linear-gradient(45deg, #F3904F, #3B4371);
transform: rotateY(-90deg) translateZ(150px) translateX(-150px);
}

.top {
background: linear-gradient(45deg, #AA076B, #61045F);
transform: rotateX(90deg) translateZ(150px) translateY(-150px);
}

.bottom {
background: linear-gradient(45deg, #ED4264, #FFEDBC);
transform: rotateX(-90deg) translateZ(150px) translateY(150px);
}

@keyframes flip {
0%, 15% {
transform: rotateY(0deg) rotateX(0deg);
}
20%, 35% {
transform: rotateY(-90deg) rotateX(0deg);
}
40%, 55% {
transform: rotateY(-180deg) rotateX(0deg);
}
60%, 75% {
transform: rotateY(-270deg) rotateX(0deg);
}
80%, 95% {
transform: rotateX(90deg);
}
100% {
transform: rotateY(0deg) rotateX(0deg);
}
}

.website-link {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
padding: 12px 24px;
background: linear-gradient(to right, #4776E6, #8E54E9);
color: white;
text-decoration: none;
border-radius: 30px;
font-size: 16px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.website-link:hover {
transform: translateX(-50%) translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

h1 {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
color: #333;
text-align: center;
width: 100%;
padding: 0 20px;
}
</style>
</head>
<body>
<h1>CSS3 3D盒子翻转动画特效</h1>

<div class="flip-container">
<div class="flip-box front">前面</div>
<div class="flip-box back">背面</div>
<div class="flip-box right">右侧</div>
<div class="flip-box left">左侧</div>
<div class="flip-box top">顶部</div>
<div class="flip-box bottom">底部</div>
</div>

</body>
</html>