【css酷炫效果】纯CSS实现立体旋转立方体

news2025/3/19 12:11:48

【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>