|
|

楼主 |
发表于 2023-2-1 23:03
|
显示全部楼层
代码及说明
- <style>
- #wrapper {
- margin: 100px 0 0 100px;
- width: 600px;
- height: 500px;
- perspective: 1200px;
- }
- #mplayer {
- position: relative;
- width: 200px;
- height: 200px;
- transform-style: preserve-3d;
- transform: translateZ(-100px) rotateX(0deg);
- animation: rot 10s linear infinite;
- }
- #mplayer > span {
- --bg1: tan;
- --bg2: teal;
- --bg3: lightgreen;
- --bg4: lightblue;
- position: absolute;
- width: 100%;
- height: 100%;
- display: grid;
- place-items: center;
- font: normal 1.6em sans-serif;
- }
- .front {
- transform: translateZ(100px) rotateX(0deg);
- background: var(--bg1);
- }
- .top {
- transform: translateY(-100px) rotateX(90deg);
- background: var(--bg2);
- }
- .back {
- transform: translateZ(-100px) rotateX(180deg);
- background: var(--bg3);
- }
- .bottom {
- transform: translateY(100px) rotateX(270deg);
- background: var(--bg4);
- }
- @keyframes rot {
- 0% { transform: translateZ(-100px) rotateX(0deg); }
- 100% { transform: translateZ(-100px) rotateX(360deg); }
- }
- </style>
- <div id="wrapper">
- <div id="mplayer">
- <span class="front">前</span>
- <span class="bottom">底</span>
- <span class="back">背</span>
- <span class="top">顶</span>
- </div>
- </div>
复制代码 目前,预留的接口是 --bgx CSS变量,x 为 1 - 4,分别代表前底背顶四个面,支持颜色、渐变背景、底图。略作加工,可以做成播放控制器
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|