马黑黑 发表于 2022-5-16 12:45

体会translate3d

<style>
.mama {
        margin: auto;
        width: fit-content;
        display: flex;
        gap: 10px;
        box-shadow: 1px 1px 2px #666;
        background: #fff;
}
.controller {
        margin: 20px;
        width: 200px;
        font: normal 14px sans-serif;
        color: #000;
}
.controller input {
        width: 120px; outline: none;
}
.controller p {
        padding: 0;
        margin: 8px 0;
}
.ballBg {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 400px;
        background: radial-gradient(#222 ,#333, #444, #555,#666, #777, #888);
        perspective: 3000px;
}
.ball {
        position: absolute;
        width: 50px;
        height: 50px;
        background: #eee linear-gradient(120deg,blue,tomato);
        border-radius: 50%;
        transform-style: preserve-3d;
}
.ball::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(at 30% 35%, rgba(255,255,255,.6),rgba(255,255,255,.2));
}
.msgDiv {}
</style>

<div class="mama">
        <div class="ballBg">
                <div class="ball"></div>
        </div>
        <div class="controller">
                <p>X: <input id="x" type="range" max="200" min="-200" value="0" /> <span id="xspan">0</span></p>
                <p>Y: <input id="y" type="range" max="200" min="-200" value="0" /> <span id="yspan">0</span></p>
                <p>Z: <input id="z" type="range" max="200" min="-200" value="0" /> <span id="zspan">0</span></p>
                <div class="msgDiv"></div>
        </div>
</div>

<script>
let ball = document.querySelector('.ball');
let msgDiv = document.querySelector('.msgDiv');
let rangeAr = document.querySelector('.controller').getElementsByTagName('input');

setState();

Array.from(rangeAr).forEach(function(item){
        item.onchange = function(){
                let id ='#' + item.id + 'span';
                document.querySelector(id).innerText = item.value;
                setState();
        }
});

function setState(){
        ball.style.transform = `translate3d(${rangeAr.value}px, ${rangeAr.value}px, ${rangeAr.value}px)`;
        msgDiv.innerText = 'transform: ' + ball.style.transform;
}
</script>

马黑黑 发表于 2022-5-16 12:46

本帖最后由 马黑黑 于 2022-5-16 13:07 编辑

translate3d 是 transform 的 3d 转换，它需要三个参数，不能省略。语法如下：
transform: translate3d(tx, ty, tz);

其中，tx 指 X轴 坐标位置，可用距离单位或百分比表示，接受正负值，如 200px、80%、-200px 和 -80% 均可；ty 指 Y轴 坐标位置，表达方式与 tx 同；tz 指 Z轴 坐标位置，仅支持距离单位，不支持百分比。下面语句，第一、二句合法，第三句不合法：

transform: translate3d(200px, -200px, 50px);
transform: translate3d(100%, -90%, 20px);

transform: translate3d(-50%, 50%, 10%);

第三句之所以不合法，是第三个参数即 tz 使用了百分比表示法，这是不允许的。

tz 值的取值范围也颇有讲究，毕竟它不同于 xy。针对屏幕，xy可视为左右和上下的位置，z 则指向屏幕与屏幕前的正前方的方向但不能用确切的距离数据来表示，tz 值的改变在屏幕上的表现似乎是对象的放大缩小而已，但绝非如此，它实际上遵循远小近大的常规原理并以该原则缩放对象。通常，tz 值与景深直接相关，对象的缩放程度与景深的数值成反比。

一楼示范中，小球的初始{xyz}坐标位置为{0,0,0}（当值为0时可以填写距离单位或百分比符号）。改变坐标系的xy值，小球与中心的距离有明显改变，z值实际上也会在xz值的基础上能改变小球的位置（但它真正改变的是距离屏幕前观者眼睛的距离）。

红影 发表于 2022-5-16 13:35

z轴的负值是远离屏幕的吧。这个真好，又是个可以直观看到效果的互动帖{:4_199:}

马黑黑 发表于 2022-5-16 20:14

红影 发表于 2022-5-16 13:35
z轴的负值是远离屏幕的吧。这个真好，又是个可以直观看到效果的互动帖

形象一点的吧

红影 发表于 2022-5-17 13:45

马黑黑 发表于 2022-5-16 20:14
形象一点的吧

这个看到你在天女你散珠中使用了{:4_187:}

加林森 发表于 2022-5-17 18:13

来学习

马黑黑 发表于 2022-5-17 18:16

红影 发表于 2022-5-17 13:45
这个看到你在天女你散珠中使用了

{:4_181:}
页: [1]
查看完整版本: 体会translate3d