html - 在已旋转的 div 上使用 CSS rotate3d

Question

我对已经旋转的 div 的轴有问题。

现在钻石在边内旋转，我想从它的顶部中心旋转。

这是一个例子：http: //jsfiddle.net/DtQd8/

HTML

<div class="diamond">
    <div class="diamondIn">
        <div class="front"></div>
        <div class="back"></div>
    </div>
</div>

CSS

.diamond
{
height: 150px;
width: 150px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: absolute;
}

.diamondIn
{
height: 150px;
width: 150px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
float: left;
}

.diamondIn:hover
{
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
}

.diamondIn .front,
.diamondIn .back
{
top: 0;
left: 0;
height: 150px;
width: 150px;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}

.diamondIn .front
{
z-index: 2;
background: #00ff00;
}

.diamondIn .back
{
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
background: #ff0000;
}

有人有什么主意吗？

Answer 1

我对你的 CSS 做了一些小的修改。我已将“变换”属性更改为 +45 度。与此同时，它也改变了 3D 的坐标。以下是更新后的代码：

.diamond
{
height: 150px;
width: 150px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: absolute;
}

.diamondIn
{
height: 150px;
width: 150px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
float: left;
}

.diamondIn:hover
{
-webkit-transform: rotate3d(150,150,0,180deg);
-moz-transform: rotate3d(150,150,0,180deg);
transform: rotate3d(150,150,0,180deg);
}

.diamondIn .front,
.diamondIn .back
{
top: 0;
left: 0;
height: 150px;
width: 150px;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
}

.diamondIn .front
{
z-index: 2;
background: #00ff00;
}
.diamondIn .back
{
-webkit-transform: rotate3d(150,150,0,180deg);
-moz-transform: rotate3d(150,150,0,180deg);
transform: rotate3d(150,150,0,180deg);
background: #ff0000;
}

Answer 2

外部 div 的变换改变了内部 div 的坐标系（这里有很好的解释）。这就是为什么内部 div 围绕已经旋转的轴旋转的原因。

将“静态”转换应用于内部 div 并在未转换的坐标中动态旋转整个结构不是更好/更容易吗？

我稍微编辑了您的 JSFiddle，试图在评论中解释所有发生的转换：jsfiddle.net/DtQd8/2/。我猜到任务了吗？:)

Answer 3

你需要添加left，top和margin-left

.diamond
{
height: 150px;
width: 150px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: absolute;
top:40px;
left:50%;
margin-left:-75px;
}

演示http://jsfiddle.net/DtQd8/1/