如何结合rotateX(50deg) rotateY(20deg) rotateZ(15deg)的简写rotate3d()
Answer 1:
rotateX(50deg)相当于rotate3d(1, 0, 0, 50deg)
rotateY(20deg)相当于rotate3d(0, 1, 0, 20deg)
rotateZ(15deg)相当于rotate3d(0, 0, 1, 15deg)
所以...
rotateX(50deg) rotateY(20deg) rotateZ(15deg)
相当于
rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg)
用于通用rotate3d(x, y, z, α)您有矩阵
哪里
你现在可以为每个3个的矩阵rotate3d变换和你乘他们。 将得到的矩阵是对应于该产生的单矩阵rotate3d 。 不知道易是如何提取值rotate3d出来的，但它肯定容易提取这些单个matrix3d 。
在第一种情况（ rotateX(50deg)或rotate3d(1, 0, 0, 50deg)您有：
x = 1 ， y = 0 ， z = 0 ， α = 50deg
因此，在这种情况下，矩阵的第一行是1 0 0 0 。
第二个是0 cos(50deg) -sin(50deg) 0 。
第三个0 sin(50deg) cos(50deg) 0 。
而第四个是明显0 0 0 1 。
在第二种情况下，必须x = 0 ， y = 1 ， z = 0 ， α = 20deg 。
第一行： cos(20deg) 0 sin(20deg) 0 。
第二行： 0 1 0 0 。
第三行： -sin(20) 0 cos(20deg) 0 。
第四： 0 0 0 1
在第三种情况下，你有x = 0 ， y = 0 ， z = 1 ， α = 15deg 。
第一行： cos(15deg) -sin(15deg) 0 0 。
第二排sin(15deg) cos(15deg) 0 0 。
而第三和第四行是0 0 1 0和0 0 0 1分别。
注意 ：您可能已经注意到，对于旋转Y罪恶值的符号变换比其他两个变换不同。 这不是一个计算错误。 这样做的原因是，对于屏幕上，你有y轴指向下跌，而非上涨。
所以这是三个4x4 ，你需要为了得到相乘矩阵4x4的产生的单矩阵rotate3d变换。 正如我已经说过，我不知道有多么容易将获得4个值，但是在4x4矩阵的16个元素是完全的16个参数matrix3d的链式变换等效。
编辑 ：
其实，事实证明这是很容易...你计算矩阵为的痕迹（对角线元素之和） rotate3d矩阵。
4 - 2*2*(1 - cos(α))/2 = 4 - 2*(1 - cos(α)) = 2 + 2*cos(α)
然后，计算出三个的产品跟踪4x4矩阵，你等同于结果2 + 2*cos(α)您提取α 。 然后你计算x ， y ， z 。
在这个特定的情况下，如果我正确计算，从三点的乘积得到的矩阵的迹4x4的矩阵将是：
T =
cos(20deg)*cos(15deg) +
cos(50deg)*cos(15deg) - sin(50deg)*sin(20deg)*cos(15deg) +
cos(50deg)*cos(20deg) +
1
所以cos(α) = (T - 2)/2 = T/2 - 1 ，这意味着α = acos(T/2 - 1)
Answer 2:
句法：
rotate3d(x, y, z, a)
价值观：
-
x是一个<number>描述表示旋转轴的矢量的x坐标。 -
y是一个<number>描述表示旋转轴的矢量的y坐标。 -
z是一个<number>描述表示旋转轴的向量的z坐标。 -
a是一个<angle>表示旋转的角度。 正角表示顺时针旋转，负角度逆时针方向之一。
像 ：
.will-distort{
transform:rotate3d(10, 10, 10, 45deg);
}
这里拨弄
这里Caniuse它
更多关于它的文档
Answer 3:
取决于你正在尝试做的，这个“黑客”可以帮助你。 比方说，你正在做的动画，并且要加改造改造后等，你不希望CSS看起来像它做100变换的：
这部作品在镀铬：1.将您想要的元素任何改变。 2.下次你要添加的变换，将其添加到计算的转换：“window.getComputedStyle（元素）.transform” - 但一定要换上新的转换到左边。 3.现在你的变换会看起来像“rotateZ（30度）的Matrix3D（......）4.接下来的时间要添加另一个转换，重复这个过程 - Chrome一律降低变换来的Matrix3D符号。
TL; DR-应用于任何你想要的变换，然后拿到计算的Matrix3D改造。
这招也可以让你快速（也就是没有自己做任何数学）作出关于在任何方向，你的参照系旋转对象的功能。 看下面的例子：
编辑 ：我已经加入XYZ翻译为好。 利用这一点，那将是非常容易放置在充分考虑具体方位特定的3D位置的物体。 还是......想象反弹，并取决于它如何与土地每次弹跳改变它的旋转轴的立方体！
var boxContainer = document.querySelector('.translator'), cube = document.getElementById('cube'), optionsContainer = document.getElementById('options'); var dims = ['x', 'y', 'z']; var currentTransform; var currentTranslate; var init = function () { optionsContainer.querySelector('.xRotation input') .addEventListener('input', function (event) { if (currentTransform != 'none') { var newTransform = 'rotateX(' + (360 - event.target.value) + 'deg) ' + currentTransform; } else { var newTransform = 'rotateX(' + (360 - event.target.value) + 'deg)'; } cube.style.transform = newTransform; }, false); optionsContainer.querySelector('.yRotation input') .addEventListener('input', function (event) { if (currentTransform != 'none') { var newTransform = 'rotateY(' + (360 - event.target.value) + 'deg) ' + currentTransform; } else { var newTransform = 'rotateY(' + (360 - event.target.value) + 'deg)'; } cube.style.transform = newTransform; }, false); optionsContainer.querySelector('.zRotation input') .addEventListener('input', function (event) { if (currentTransform != 'none') { var newTransform = 'rotateZ(' + (360 - event.target.value) + 'deg) ' + currentTransform; } else { var newTransform = 'rotateZ(' + (360 - event.target.value) + 'deg)'; } cube.style.transform = newTransform; }, false); optionsContainer.querySelector('.xTranslation input') .addEventListener('input', function (event) { if (currentTranslate != 'none') { var newTransform = 'translateX(' + (100 - event.target.value) + 'px) ' + currentTranslate; } else { var newTransform = 'translateX(' + (100 - event.target.value) + 'px)'; } boxContainer.style.transform = newTransform; }, false); optionsContainer.querySelector('.yTranslation input') .addEventListener('input', function (event) { if (currentTranslate != 'none') { var newTransform = 'translateY(' + (100 - event.target.value) + 'px) ' + currentTranslate; } else { var newTransform = 'translateY(' + (100 - event.target.value) + 'px)'; } boxContainer.style.transform = newTransform; }, false); optionsContainer.querySelector('.zTranslation input') .addEventListener('input', function (event) { if (currentTranslate != 'none') { var newTransform = 'translateZ(' + (500 - event.target.value) + 'px) ' + currentTranslate; } else { var newTransform = 'translateZ(' + (500 - event.target.value) + 'px)'; } boxContainer.style.transform = newTransform; }, false); reset(); }; function reset() { currentTransform = window.getComputedStyle(cube).transform; currentTranslate = window.getComputedStyle(boxContainer).transform; optionsContainer.querySelector('.xRotation input').value = 360; optionsContainer.querySelector('.yRotation input').value = 360; optionsContainer.querySelector('.zRotation input').value = 360; optionsContainer.querySelector('.xTranslation input').value = 100; optionsContainer.querySelector('.yTranslation input').value = 100; optionsContainer.querySelector('.zTranslation input').value = 500; } window.addEventListener('DOMContentLoaded', init, false); document.addEventListener('mouseup', reset, false); .translator { height: 200px; position: absolute; width: 200px; transform-style: preserve-3d; } .threeSpace { height: 200px; moz-perspective: 1200px; o-perspective: 1200px; perspective: 200px; position: absolute; transform-origin: 50px 50px 100px; webkit-perspective: 1200px; width: 100px; perspective-origin: 100px 25px; transform-style: preserve-3d; } #pointer{ position:relative; height:2px; width:2px; top:25px; left:100px; background:blue; z-index:9999; } #cube { height: 100%; moz-transform-origin: 90px 110px 0px; moz-transform-style: preserve-3d; o-transform-origin: 90px 110px 0px; o-transform-style: preserve-3d; position: absolute; transform-origin: 90px 110px 0px; transform-style: preserve-3d; webkit-transform-origin: 90px 110px 0px; webkit-transform-style: preserve-3d; width: 100%; } #cube .midPoint{ position:absolute; top:48px; left:48px; height:1px; width:1px; background:green; } #cube figure { border: 2px solid black; color: white; display: block; font-size: 60px; font-weight: bold; height: 96px; line-height: 96px; position: absolute; text-align: center; width: 96px; /* transform-style: preserve-3d; */ } #cube .front { background: hsl(0, 100%, 50%); } #cube .back { background: hsl(60, 100%, 50%); } #cube .right { background: hsl(120, 100%, 50%); } #cube .left { background: hsl(180, 100%, 50%); } #cube .top { background: hsl(240, 100%, 50%); } #cube .bottom { background: hsl(300, 100%, 50%); } #cube .front { moz-transform: translateZ(50px); o-transform: translateZ(50px); transform: translateZ(50px); webkit-transform: translateZ(50px); } #cube .back { moz-transform: rotateX(-180deg) translateZ(50px); o-transform: rotateX(-180deg) translateZ(50px); transform: rotateX(-180deg) translateZ(50px); webkit-transform: rotateX(-180deg) translateZ(50px); } #cube .right { moz-transform: rotateY(90deg) translateZ(50px); o-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px); webkit-transform: rotateY(90deg) translateZ(50px); } #cube .left { moz-transform: rotateY(-90deg) translateZ(50px); o-transform: rotateY(-90deg) translateZ(50px); transform: rotateY(-90deg) translateZ(50px); webkit-transform: rotateY(-90deg) translateZ(50px); } #cube .top { moz-transform: rotateX(90deg) translateZ(50px); o-transform: rotateX(90deg) translateZ(50px); transform: rotateX(90deg) translateZ(50px); webkit-transform: rotateX(90deg) translateZ(50px); } #cube .bottom { moz-transform: rotateX(-90deg) translateZ(50px); o-transform: rotateX(-90deg) translateZ(50px); transform: rotateX(-90deg) translateZ(50px); webkit-transform: rotateX(-90deg) translateZ(50px); } #options{ position:absolute; width:80%; top:40%; } #options input { width: 60%; } <body> <div class="threeSpace"> <div id="pointer"></div> <div class="translator"> <div id="cube"> <figure class="front"><div class='midPoint'></div></figure> <figure class="back"></figure> <figure class="right"></figure> <figure class="left"></figure> <figure class="top"></figure> <figure class="bottom"></figure> </div> </div> </div> <section id="options"> <p class="xRotation"> <label>xRotation</label> <input type="range" min="0" max="720" value="360" data-units="deg" /> </p> <p class="yRotation"> <label>yRotation</label> <input type="range" min="0" max="720" value="360" data-units="deg" /> </p> <p class="zRotation"> <label>zRotation</label> <input type="range" min="0" max="720" value="360" data-units="deg" /> </p> <p class="xTranslation"> <label>xTranslation</label> <input type="range" min="0" max="200" value="100" data-units="deg" /> </p> <p class="yTranslation"> <label>yTranslation</label> <input type="range" min="0" max="200" value="100" data-units="deg" /> </p> <p class="zTranslation"> <label>zTranslation</label> <input type="range" min="0" max="1000" value="500" data-units="deg" /> </p> </section> </body> Answer 4:
的确切值是rotate3d(133,32,58,58deg)
看到小提琴 （Chrome和Safari浏览器，使用WebKit的变换）
文章来源: rotate3d shorthand
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/B5n9T.png', '推荐 乱世女痞 的文章《ROTATE3D速记(rotate3d shorthand)》','https://www.manongdao.com/article-1161069.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}