Question

尝试制作一个旋转的立方体，但它在旋转时上下摆动，认为它与变换原点有关。尝试弄乱立方体的不同值，但它只是变得更加夸张。

＆＃13;

/* Chrome, Safari, Opera */ 
@keyframes spin-vertical
{
    0%   { -webkit-transform: rotateX(0); }
    100% { -webkit-transform: rotateX(-360deg); }
}

/* Standard syntax */
@-webkit-keyframes spin-vertical
{
    0%   { -webkit-transform: rotateX(0); }
    100% { -webkit-transform: rotateX(-360deg); }
}

body
{
    font: normal 30px "HelveticaNeue-Light", sans-serif;
}

.wrapper
{
    margin: 200px;
    background-color: black;
}

.face
{
    background-color: black;
    color: white;
    padding: 2px 5px;
    position: absolute;
    width: 300px;
}

.cube
{
    position: relative;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: spin-vertical 5s infinite linear;
    -moz-transform-origin: 10px 18px;
    -ms-transform-origin: 10px 18px;
    -o-transform-origin: 10px 18px;
    -webkit-transform-origin: 10px 18px;
    transform-origin: 10px 18px;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0 auto;
}

#top
{
    -moz-transform: rotatex(-270deg) translatey(-40px);
    -ms-transform: rotatex(-270deg) translatey(-40px);
    -o-transform: rotatex(-270deg) translatey(-40px);
    -webkit-transform: rotatex(-270deg) translatey(-40px);
    transform: rotatex(-270deg) translatey(-40px);
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    -webkit-transform-origin: top center;
    transform-origin: top center
}

#bottom
{
    -moz-transform: rotatex(90deg) translatey(0);
    -ms-transform: rotatex(90deg) translatey(0);
    -o-transform: rotatex(90deg) translatey(0);
    -webkit-transform: rotatex(90deg) translatey(0);
    transform: rotatex(90deg) translatey(0);
    -moz-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    -o-transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center
}

#back
{
    -moz-transform: translatez(-40px) rotatex(-180deg);
    -ms-transform: translatez(-40px) rotatex(-180deg);
    -o-transform: translatez(-40px) rotatex(-180deg);
    -webkit-transform: translatez(-40px) rotatex(-180deg);
    transform: translatez(-40px) rotatex(-180deg)
}

#front
{
    -moz-transform: translatez(40px);
    -ms-transform: translatez(40px);
    -o-transform: translatez(40px);
    -webkit-transform: translatez(40px);
    transform: translatez(40px)
}

＆＃13;

<body>
    <div class="wrapper">
        <div class="cube" id="cuberotate">
            <div class="face" id="front">FACE 1</div>
            <div class="face" id="top">FACE 4</div>
            <div class="face" id="bottom">FACE 2</div>
            <div class="face" id="back">FACE 3</div>
        </div>
    </div>
</body>

＆＃13;

＆＃13; JSFiddle：https://jsfiddle.net/w1kc28zp/

任何建议都会很棒。

Answer 1

完成关于双方如何转换的一些更新，以及你对转换起源的正确看法。在立方体元素上它应该是＆＃34; 0 20px＆＃34;其中20px代表每边高度的50％。

见结果：https://jsfiddle.net/w1kc28zp/1/

.cube {
  margin: 0 auto;
  width:300px;
  position:relative;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin:0 20px;
  -webkit-animation: spin-vertical 5s infinite linear;
}

#front {
  -webkit-transform: translateZ(20px); 
}
#top {
  transform: rotateX(-270deg) translateY(-20px);
  transform-origin:top center;
}
#back {
  transform: translateZ(-20px) rotateX(180deg);
}
#bottom {
  transform: rotateX(-90deg) translateY(20px);
  transform-origin:bottom center;
}

旋转时CSS立方体摇摆不定

1 个答案: