当前位置：首页 > wzjs >正文

解聘人力资源网站上怎么做推广页面制作

wzjs 2025/7/20 7:51:36

解聘人力资源网站上怎么做,推广页面制作,怎么自己开发微信小程序,毕设做网站需要买域名么【css酷炫效果】纯CSS实现立体旋转立方体缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492014 缘创作随缘，不定时更新。创作背景刚看到csdn出活动了&am…

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