马黑黑 发表于 2023-2-1 23:01

六面体只要四面

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

马黑黑 发表于 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，分别代表前底背顶四个面，支持颜色、渐变背景、底图。略作加工，可以做成播放控制器

庶民来了 发表于 2023-2-2 05:42

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

醉美水芙蓉 发表于 2023-2-2 07:00

马黑黑 发表于 2023-2-2 08:26

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

上午好

马黑黑 发表于 2023-2-2 08:26

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

早上好

红影 发表于 2023-2-2 10:24

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

马黑黑 发表于 2023-2-2 10:32

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

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

红影 发表于 2023-2-2 20:46

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

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

红影 发表于 2023-2-2 20:59

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

马黑黑 发表于 2023-2-2 22:00

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

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

马黑黑 发表于 2023-2-2 22:02

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

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

红影 发表于 2023-2-2 22:56

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

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

红影 发表于 2023-2-2 22:57

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

嗯嗯，我总是弄错参照基准问题，貌似好几次了{:4_173:}

马黑黑 发表于 2023-2-2 23:09

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

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

马黑黑 发表于 2023-2-2 23:10

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

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

红影 发表于 2023-2-3 16:17

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

一般知道了用什么做参照的，倒是好理解了呢{:4_204:}

红影 发表于 2023-2-3 16:18

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

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

马黑黑 发表于 2023-2-3 17:55

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

感觉不错的

马黑黑 发表于 2023-2-3 17:55

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

多试试，一切都可以弄明白
页: [1] 2
查看完整版本: 六面体只要四面