网广州建网站站制作wordpress 函数 应用
【css酷炫效果】纯CSS实现立体旋转立方体
- 缘
- 创作背景
- html结构
- css样式
- 完整代码
- 效果图
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492014
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
<div class="cube-system"><div class="cube-container"><div class="cube-face front">前面</div><div class="cube-face back">后面</div><div class="cube-face top">上面</div><div class="cube-face bottom">下面</div><div class="cube-face left">左面</div><div class="cube-face right">右面</div></div>
</div>css样式
.cube-system {/* 全局透视 */perspective: 800px;width: 300px;height: 300px;margin: 200px auto;
}.cube-container {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;animation: rotate 12s infinite linear;transition: 0.5s;
}/* 悬停暂停动画 */
.cube-container:hover {animation-play-state: paused;
}/* 立方体面通用样式 */
.cube-face {position: absolute;width: 200px;height: 200px;border: 2px solid #fff;background: rgba(0, 150, 255, 0.9);font-size: 40px;display: flex;align-items: center;justify-content: center;box-shadow: 0 0 30px rgba(0,0,0,0.2);
}/* 各面定位 */
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }@keyframes rotate {0% { transform: rotateX(0) rotateY(0); }50% { transform: rotateX(360deg) rotateY(180deg); }100% { transform: rotateX(720deg) rotateY(360deg); }
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head><title>页面特效</title>
<style>
.cube-system {/* 全局透视 */perspective: 800px;width: 300px;height: 300px;margin: 200px auto;
}.cube-container {position: relative;width: 200px;height: 200px;transform-style: preserve-3d;animation: rotate 12s infinite linear;transition: 0.5s;
}/* 悬停暂停动画 */
.cube-container:hover {animation-play-state: paused;
}/* 立方体面通用样式 */
.cube-face {position: absolute;width: 200px;height: 200px;border: 2px solid #fff;background: rgba(0, 150, 255, 0.9);font-size: 40px;display: flex;align-items: center;justify-content: center;box-shadow: 0 0 30px rgba(0,0,0,0.2);
}/* 各面定位 */
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }@keyframes rotate {0% { transform: rotateX(0) rotateY(0); }50% { transform: rotateX(360deg) rotateY(180deg); }100% { transform: rotateX(720deg) rotateY(360deg); }
}
</style></head>
<body><div class="cube-system"><div class="cube-container"><div class="cube-face front">前面</div><div class="cube-face back">后面</div><div class="cube-face top">上面</div><div class="cube-face bottom">下面</div><div class="cube-face left">左面</div><div class="cube-face right">右面</div></div>
</div></body>
</html>效果图
