我已经旋转过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;
}
有没有人有任何想法?
答案 0 :(得分:1)
外部div的变换改变了内部div的坐标系(良好的解释here)。这就是内部div围绕轴旋转的原因。
在非变换坐标中,将“静态”变换应用于内部div并动态旋转整个构造不是更好/更容易吗?
我编辑了你的JSFiddle,尝试解释评论中发生的所有转换:jsfiddle.net/DtQd8/2/。我猜到了这个任务吗? :)
答案 1 :(得分: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;
}
答案 2 :(得分:0)
您需要添加左,顶部和 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;
}