css - CSS rotate3d 属性行为异常
问题描述
我正在阅读有关旋转元素的 CSS rotate3d() 属性。我认为函数中的前三个参数是乘数,第四个是度数。
乘数的值必须在 0 和 1 之间。这意味着rotate3d(1, 0, 0, 90deg)
只会产生 rotateX(90deg)。为了获得更多的旋转范围,我将其更改为,rotate3d(0.25, 0, 0, 360deg)
但它会产生完全不同的结果。
我也注意到这transform: rotateX(45deg) rotateY(45deg);
与transform: rotate3d(1,1,0, 45deg);
. 等如果我们不能简单地改变所需尺寸的乘数以获得所需的旋转,我应该如何计算三个乘数的值?
谢谢。
解决方案
使用rotate3d(x, y, z, a)
前 3 个数字时,坐标将定义旋转矢量,并且a
是旋转角度。它们不是旋转的乘数。
rotate3d(1, 0, 0, 90deg)
与 相同rotate3d(0.25, 0, 0, 90deg)
,也相同,rotate3d(X, 0, 0, 90deg)
因为在所有情况下我们都将具有相同的向量。这也与rotateX(90deg)
.box {
margin:30px;
padding:20px;
background:red;
display:inline-block;
}
<div class="box" style="transform:rotate3d(1,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(99,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(0.25,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(100,0,0,60deg)"></div>
<div class="box" style="transform:rotate3d(-5,0,0,60deg)"></div>
<div class="box" style="transform:rotateX(60deg)"></div>
由此我们也可以得出rotate3d(0, Y, 0, a)
与 相同rotateY(a)
和rotate3d(0, 0, Y, a)
相同的结论rotate(a)
。请注意0
在两个坐标中的使用,这将使我们的向量始终在同一轴上(X 或 Y 或 Z)
rotate3d(1,1,0, 45deg)
不一样rotateX(45deg) rotateY(45deg)
。第一个将围绕由定义的向量执行一次旋转(1,1,0)
,第二个将围绕 X 和 Y 轴执行两次连续旋转。
换句话说,rotate3d()
不是其他旋转的组合,而是自身的旋转。其他旋转是rotate3d()
考虑预定义轴的特殊情况。
如果保持相同的角度,乘数技巧适用于坐标。rotate3d(x, y, z, a)
等效于rotate3d(p*x, p*y, p*z, a)
因为如果将所有坐标乘以相同的值,则保持相同的矢量方向,并且仅更改与定义旋转无关的矢量维度。只有方向是相关的。
更多细节在这里:https ://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
您可以清楚地注意到,使用 for 范围内的值[-1,1]
足以x,y,z
定义所有组合。另一方面,任何组合x,y,z
都可以简化为范围内的值[-1,1]
例子:
.box {
margin:30px;
padding:20px;
background:red;
display:inline-block;
}
<div class="box" style="transform:rotate3d(10,5,-9,60deg)"></div>
<div class="box" style="transform:rotate3d(1,0.5,-0.9,60deg)"></div>
<div class="box" style="transform:rotate3d(25,-5,-8,60deg)"></div>
<div class="box" style="transform:rotate3d(1,-0.2,-0.32,60deg)"></div>
我们简单地除以最大的数字。
推荐阅读
- r - 为什么我不能阅读使用 rvest 进行网页抓取的可点击链接?
- node.js - Shop pay 与 Vue 前端的集成
- api - 无法获取数据 API Fluter
- java - 日志库以抽象 systemd 日志、Windows 事件日志、macOS 日志(控制台)?
- javascript - 不可变 JS - 将地图集合转换为列表
- python - python - 如何在Python的多次迭代下不输入键就给出单个字符输入?
- javascript - 如何判断img中是否有src属性?如果img中没有src属性,可以更改图片样式
- android - GPRC Android 生成的代码有未解析的引用
- c# - 如果一个用户注册了sam,另一个用户也可以注册sam。我怎样才能防止这种情况?
- azure-devops - ##[错误]指定cmdlet的目标不能是基于Windows客户端的操作系统