论坛 › 马黑黑教程专版 › transform的rotate+translate演示

马黑黑 发表于 2023-7-3 08:03

transform的rotate+translate演示

<style>
.mama {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: grid;
        place-items: center;
        position: relative;
        margin: 30px auto;
}
.mama::before, .mama::after {
        position: absolute;
        content: '';
        width: 1px;
        height: 100%;
        background: red;
}
.mama::after { width: 100%; height:1px; }
.circle {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px dotted red;
        display: inherit;
        place-items: inherit;
}
.circle::before {
        position: absolute;
        content: 'O';
        font: normal 16px/20px sans-serif;
        color: red;
        text-align: center;
}
#myball {
        position: absolute;
        width: 40px;
        height: 40px;
        left: calc(50% - 20px);
        top: calc(50% - 20px);
        border-radius: 50%;
        background: pink;
        opacity: .95;
        box-shadow: inset 0px 0px 20px red;
        display: inherit;
        place-items: inherit;
        transition: all 2s;
        z-index: 9;
}
.btnwrap {
        width: 400px;
        position: relative;
        margin: auto;
}
.tz { margin: 8px 0; }
#msgBox { color: red; }
</style>

<p class="tz">当一个元素进行了绝对定位，可以通过 transform 属性的 rotate 和 translate 的配套设置让它围绕自身原先的定位点做圆弧运动，要求 rotate在前、translate 在后。一般地，translate 的水平方向和垂直方向用一个便可。下面的演示，在改变角度和移动距离时，如果X轴和Y轴保持其中一个处于 0px 的状态，小球最多只有一半突破父元素的圆周边界，但如果XY坐标同时设计非 0 px且较大数值时，小球可能会严重超越父元素的边界。</p>
<p id="msgBox" class="tz">代码</p>
<div class="mama">
        <div id="myball">正</div>
        <div class="circle"></div>
</div>
<div class="btnwrap">
        <p class="tz">
                <lable for="xRange">X 轴距离 ：</lable>
                <input id="xRange" type="range" min="-200" max="200" value="0" oninput="xR.value=this.value" />
                <output id="xR" for="xRange">0</output>
        </p>
        <p class="tz">
                <lable for="yRange">Y 轴距离 ：</lable>
                <input id="yRange" type="range" min="-200" max="200" value="0" oninput="yR.value=this.value" />
                <output id="yR" for="yRange">0</output>
        </p>
        <p class="tz">
                <lable for="aRange">旋转角度 ：</lable>
                <input id="aRange" type="range" min="-360" max="360" value="0" oninput="aR.value=this.value" />
                <output id="aR" for="aRange">0</output>
        </p>
        <p class="tz"><input id="btnReset" type="button" value="重置" /></p>
</div>
<p class="tz">【提示】translate(0px,0px) 可以分开写成 translateX(0px) 和 translateY(0px) 。</p>

<script>

let ranges = ;

let defaultSetting = () => {
        ranges.forEach((item) => item.value = 0);
        myball.style.transform = 'rotate(0deg) translate(0px)';
        outputMsg();
}

let outputMsg = () => msgBox.innerText = '代码 : transform: ' + myball.style.transform + ';';

let change = () => {
        myball.style.transform = `rotate(${aRange.value}deg) translate(${xRange.value}px,${yRange.value}px)`;
        outputMsg();
}

xRange.onchange = yRange.onchange = aRange.onchange = () => change();

btnReset.onclick = () => defaultSetting();

defaultSetting();

</script>

马黑黑 发表于 2023-7-3 08:18

要点：

一、运动对象（元素）做绝对定位（position: absolute）；

二、rotate（旋转）+ translate（移位）的顺序不能颠倒。如果不想让元素在运动中旋转，可以考虑下面的做法：

      transform: rotate(30deg) translate(-100px) rotate(-30deg);

这实际上是反向转动，将前面的转动同步抵消，达到的效果是元素没有转动。

三、为方便控制运动对象运动路线，一般保留 translate X、Y坐标参数的其中一个保持 0px 不变；

南无月 发表于 2023-7-3 09:32

看到这贴我第一感觉是：壮观

南无月 发表于 2023-7-3 09:49

马黑黑 发表于 2023-7-3 08:18
要点：

一、运动对象（元素）做绝对定位（position: absolute）；


现在才知道斜着吐泡泡加一个rotate(-45deg)就可以了
从一楼图上看很直观，角度-45,X轴不变，Y轴为-130，这样就是十分完美

刚才跑贴子里试了一下，角度改-45,Y轴的数据0居然不用变，是不是跟粒子定位有关系
from { transform: rotate(-45deg) translateY(0px); opacity: 1; }

红影 发表于 2023-7-3 10:12

“要求 rotate在前、translate 在后。”
这个是指做在帖子里的时候吧，在这里玩的时候，可以先移动translate的XY，然后再rotate，看着小球跑来跑去真好玩{:4_173:}

红影 发表于 2023-7-3 10:51

看到月儿的话，才发现那个吐泡泡的帖子没完全看懂，我去那边问一下吧。

马黑黑 发表于 2023-7-3 11:44

红影 发表于 2023-7-3 10:12
“要求 rotate在前、translate 在后。”
这个是指做在帖子里的时候吧，在这里玩的时候，可以先移动transla ...

那倒也是

马黑黑 发表于 2023-7-3 11:45

南无月 发表于 2023-7-3 09:32
看到这贴我第一感觉是：壮观

壮观而美，简称壮美

马黑黑 发表于 2023-7-3 11:47

南无月 发表于 2023-7-3 09:49
现在才知道斜着吐泡泡加一个rotate(-45deg)就可以了
从一楼图上看很直观，角度-45,X轴不变，Y轴为-130， ...

那里是关键帧动画，from ... to ... 或 百分比表示法，translate 的值若有前后变化，它就会移动。前后没有变化，单单旋转多少度，都是在原地旋转。

运动对象的原始 left 和 top 值，会影响运动形态。

马黑黑 发表于 2023-7-3 11:47

红影 发表于 2023-7-3 10:51
看到月儿的话，才发现那个吐泡泡的帖子没完全看懂，我去那边问一下吧。

{:4_190:}

樵歌 发表于 2023-7-3 15:59

俺乱设置一通，那小球倒也听话，跟着乱跑一气{:4_358:}

马黑黑 发表于 2023-7-3 17:29

樵歌 发表于 2023-7-3 15:59
俺乱设置一通，那小球倒也听话，跟着乱跑一气

好玩吧

南无月 发表于 2023-7-3 18:09

马黑黑 发表于 2023-7-3 11:45
壮观而美，简称壮美

壮观壮美，加了壮字就大气了起来{:4_173:}。。壮黑黑

南无月 发表于 2023-7-3 18:09

马黑黑 发表于 2023-7-3 11:47
那里是关键帧动画，from ... to ... 或 百分比表示法，translate 的值若有前后变化，它就会移动。前后没 ...

我觉得贴子里的原始值起了决定性作用

马黑黑 发表于 2023-7-3 19:45

南无月 发表于 2023-7-3 18:09
我觉得贴子里的原始值起了决定性作用

有时候，关键帧只用to ，说明有原始的值

马黑黑 发表于 2023-7-3 19:46

南无月 发表于 2023-7-3 18:09
壮观壮美，加了壮字就大气了起来。。壮黑黑

一般只说壮黑或黑壮

红影 发表于 2023-7-3 20:20

马黑黑 发表于 2023-7-3 11:44
那倒也是

让那小球转了好多圈，特别好玩儿。{:4_173:}

红影 发表于 2023-7-3 20:21

马黑黑 发表于 2023-7-3 11:47


谢谢黑黑耐心解答。{:4_187:}

马黑黑 发表于 2023-7-3 21:07

红影 发表于 2023-7-3 20:21
谢谢黑黑耐心解答。

继续喝水{:4_190:}

马黑黑 发表于 2023-7-3 21:08

红影 发表于 2023-7-3 20:20
让那小球转了好多圈，特别好玩儿。

每一次的改变，它会从上一次的位置过渡到下一次的位置，用时总是两秒，这是 transition 的功劳

查看完整版本: transform的rotate+translate演示