Question

我有一排3d立方体，当你滚动它们时它旋转（我猜它在技术上不是一个立方体，因为只有两个边，但幻觉是它是一个立方体）。当立方体没有旋转时，它就像它想象的那样，但是当你悬停并且旋转发生时，绿色旋转的容器向右偏移，我不是百分之百确定原因。

提前感谢您的帮助。这是js小提琴：http://jsfiddle.net/loriensleafs/c3ewZ/1/

html如下：

<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>
<div class='box-scene'>
    <div class='box'>
        <div class='front face'>
        </div>
        <div class="side face">
            <p>This is back</p>
        </div>
    </div>
</div>

CSS：身体 { 保证金：0像素; 填充：0像素; }

.box-scene {
    -webkit-perspective: 700;
    width: 25%;
    height: 180px;
    float:left;

    z-index: 999;
}
.box-scene:hover .box {
    -webkit-transform: rotateY(90deg);
}
.box {
    width: 100%;
    height: 100%;
    position: relative;

    -webkit-transform-style: preserve-3d;

    -webkit-transition: all 0.4s ease-out;
    -webkit-transform-origin: 90px 90px -90px;


}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: visible; 

    -webkit-transform-origin: 0 0;
}
.front {
    -webkit-transform: rotateY(0deg);
    z-index: 2;
    background: #d9d9d9;
}
.side {
    background: #9dcc78;
    -webkit-transform: rotateY(90deg);
    z-index: 1;
    left: 0px;
}

Answer 1

您必须将.box中的z轴属性更改为-50%宽度的.box-scene。

这样做的唯一方法似乎是使用Javascript，因为浏览器不知道-50％的引用是什么。正如VikingBlooded所指出的，z轴必须是一个长度。

.box {
    -webkit-transform-origin: center center -50%;
}

因此，由于这是不可能的，并且您没有在样式表中声明固定宽度，因此必须使用脚本。我不知道你是否想要使用jQuery，但这个小脚本解决了你的问题：

$(function() {
    var width = parseInt($(".box-scene").css("width"));
    $(".box").css("-webkit-transform-origin", "center center -" + width/2 + "px");
});

css 3d立方体在悬停旋转时有奇怪的空间

1 个答案: