六面体只要四面

马黑黑

前 底 背 顶

马黑黑

代码及说明

1. <style>
   
2. #wrapper {
   
3.         margin: 100px 0 0 100px;
   
4.         width: 600px;
   
5.         height: 500px;
   
6.         perspective: 1200px;
   
7. }
   
8. #mplayer {
   
9.         position: relative;
   
10.         width: 200px;
    
11.         height: 200px;
    
12.         transform-style: preserve-3d;
    
13.         transform: translateZ(-100px) rotateX(0deg);
    
14.         animation: rot 10s linear infinite;
    
15. }
    
16. #mplayer > span {
    
17.         --bg1: tan;
    
18.         --bg2: teal;
    
19.         --bg3: lightgreen;
    
20.         --bg4: lightblue;
    
21.         position: absolute;
    
22.         width: 100%;
    
23.         height: 100%;
    
24.         display: grid;
    
25.         place-items: center;
    
26.         font: normal 1.6em sans-serif;
    
27. }
    
28. .front {
    
29.         transform: translateZ(100px) rotateX(0deg);
    
30.         background: var(--bg1);
    
31. }
    
32. .top {
    
33.         transform: translateY(-100px) rotateX(90deg);
    
34.         background: var(--bg2);
    
35. }
    
36. .back {
    
37.         transform: translateZ(-100px) rotateX(180deg);
    
38.         background: var(--bg3);
    
39. }
    
40. .bottom {
    
41.         transform: translateY(100px) rotateX(270deg);
    
42.         background: var(--bg4);
    
43. }
    
44. @keyframes rot {
    
45.          0% { transform: translateZ(-100px) rotateX(0deg); }
    
46.          100% { transform: translateZ(-100px) rotateX(360deg); }
    
47. }
    
48. </style>
    
49. 
    
50. <div id="wrapper">
    
51.         <div id="mplayer">
    
52.                 <span class="front">前</span>
    
53.                 <span class="bottom">底</span>
    
54.                 <span class="back">背</span>
    
55.                 <span class="top">顶</span>
    
56.         </div>
    
57. </div>

复制代码

目前，预留的接口是 --bgx CSS变量，x 为 1 - 4，分别代表前底背顶四个面，支持颜色、渐变背景、底图。略作加工，可以做成播放控制器

庶民来了

好，这些知识太重要了，顶。

马黑黑

庶民来了 发表于 2023-2-2 05:42
好，这些知识太重要了，顶。

上午好

马黑黑

醉美水芙蓉 发表于 2023-2-2 07:00
欣赏学习黑黑新教材！

早上好

红影

看到长宽都是200，ZY移动的都是100，基准点是居中的是么？

马黑黑

红影 发表于 2023-2-2 10:24
看到长宽都是200，ZY移动的都是100，基准点是居中的是么？

如果不设置 transform-origin，则是居中的

红影

马黑黑 发表于 2023-2-2 10:32
如果不设置 transform-origin，则是居中的

我记得图片的基准点是左上角？看样子我又记混了

红影

为什么这里看到露出的后面的是左面的，在另一个帖子里是右面的？

马黑黑

红影 发表于 2023-2-2 20:59
为什么这里看到露出的后面的是左面的，在另一个帖子里是右面的？

这就是景深大小等一系列问题了

马黑黑

红影 发表于 2023-2-2 20:46
我记得图片的基准点是左上角？看样子我又记混了

一切随环境变化而变化吧。可以给 mplayer 加个边框，以观察里面四个 span 的位置，你就能理解更多

红影

马黑黑 发表于 2023-2-2 22:00
这就是景深大小等一系列问题了

是这些配置的变化造成的感觉吧。

红影

马黑黑 发表于 2023-2-2 22:02
一切随环境变化而变化吧。可以给 mplayer 加个边框，以观察里面四个 span 的位置，你就能理解更多

嗯嗯，我总是弄错参照基准问题，貌似好几次了

马黑黑

红影 发表于 2023-2-2 22:57
嗯嗯，我总是弄错参照基准问题，貌似好几次了

这些东东都容易搞混的，我也经常弄错

马黑黑

红影 发表于 2023-2-2 22:56
是这些配置的变化造成的感觉吧。

反正是综合的结果。如果加上其他的东东，那是可控的，比如 perspective-origin 什么的

红影

马黑黑 发表于 2023-2-2 23:09
这些东东都容易搞混的，我也经常弄错

一般知道了用什么做参照的，倒是好理解了呢

红影

马黑黑 发表于 2023-2-2 23:10
反正是综合的结果。如果加上其他的东东，那是可控的，比如 perspective-origin 什么的

今天做的帖子里我试着加了个 perspective-origin ，变成带点俯视的感觉

马黑黑

红影 发表于 2023-2-3 16:18
今天做的帖子里我试着加了个 perspective-origin ，变成带点俯视的感觉

感觉不错的

马黑黑

红影 发表于 2023-2-3 16:17
一般知道了用什么做参照的，倒是好理解了呢

多试试，一切都可以弄明白