CSS3D translationZ与translationY思维错误
我觉得我在这里犯了一个很大的思考错误。
请看一下这把小提琴：http://jsfiddle.net/kimgysen/zdP8q/
我想知道如何在3D中自己构建一个旋转立方体，而不是仅仅复制它，所以我正在进行实验；但在第一阶段，我已经被困住了。
第一，守则：
<section class="container">
<div id="cube">
<figure class="front">1</figure>
<figure class="back">2</figure>
<!--
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>-->
</div>
.container {
width: 200px;
height: 200px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 1000px;
perspective: 1000px;
}
#cube {
margin: 0px;
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transition: transform 1s;
-webkit-transform: rotateX( -20deg ) rotateY( 20deg );
transform: rotateX( -20deg ) rotateY( 20deg );
}
#cube figure {
margin: 0px;
display: block;
position: absolute;
width: 196px;
height: 196px;
border: 2px solid black;
line-height: 196px;
font-size: 120px;
font-weight: bold;
color: white;
text-align: center;
}
#cube.panels-backface-invisible figure {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#cube .front { background: hsla( 0, 100%, 50%, 0.7 ); }
#cube .back { background: hsla( 60, 100%, 50%, 0.7 ); }
#cube .front {
-webkit-transform: translateZ( 100px );
transform: translateZ( 100px );
}
#cube .back {
-webkit-transform: rotateX( 90deg ) translateZ( 100px );
transform: rotateX( 90deg ) translateZ( 100px );
}我想知道的是这句话：
-webkit-transform: rotateX( 90deg ) translateZ( 100px );这对你来说是个非常愚蠢的问题，但仍然是：
为什么translateZ会在Y轴上向上移动？
当将translateZ转换为translateY时，它会被移动到Z-轴:-s
-webkit-transform: rotateX( 90deg ) translateY( 100px );从小学开始我就认为:X轴=水平轴，Y轴=垂直轴和Z轴是两个轴上的垂轴。指向你)。
有人能给我解释一下发生了什么吗？在这一点上我觉得很蠢
回答 2
Stack Overflow用户
发布于 2013-09-27 17:38:37
是的，轴就像你说的那样工作。
但是，当您进行旋转时，您不是在旋转对象，而是在旋转对象空间。
所以，在X轴旋转之后，z轴可以变成y轴。(在90度)，可以变成z轴倒(在180度)，可以变成y轴倒转(在270度)，并且可以在360度时恢复到z轴。
当然，在这两者之间，它不与任何轴对齐，运动通过一个对角线轴。
Stack Overflow用户
发布于 2013-09-27 17:59:00
看起来你需要一个逻辑起点才能在你的脑海里解决这个问题。
设置所有立方体边/面板的位置:绝对；转换-原点:中心；
现在我们知道我们所有的面板都会相对于同一位置移动，也就是面板的中心。
因此，我们现在通过将这些面板从默认的Z方向移开来实现这个3D。
为了制作一个立方体，我们需要将这些面板从它们默认的Z方向0(我们需要保留它，以便有一个很好的锚在动画时旋转)转换成面板宽度的一半，因为.几何学。
现在我们要做的就是用rotateY和rotateX (90 do，180 do，-90 do)围绕轴旋转。
然后把所有的东西都拿出来，然后在上面做个动画。
https://stackoverflow.com/questions/19054591
复制相似问题
腾讯云开发者
