与CSS3动画立方体状的（只有两个面）效果 [英] Animated cube-like (only two faces) effect with CSS3
问题描述
我想重现此的jsfiddle我是prepared基础上的这真棒教程（请查看演示）。但我不希望键的功能，只是在徘徊。
I would like to reproduce this jsfiddle I that prepared based on this awesome tutorial (please check the demo). But I don't want the keys functionality, just on hover.
但是，只使用2面（正面和背面）。
But that only uses 2 faces (front and back).
我试过了，是这样的：
#cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform .5s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform .5s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 300px;
width: 300px;
padding: 0px;
background-color: rgba(50, 50, 50, 1);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#cube .one {
-webkit-transform: rotateX(90deg) translateZ(150px);
-moz-transform: rotateX(90deg) translateZ(150px);
background:red;
}
#cube .two {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
background:gold;
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(150px);
-moz-transform: rotateY(90deg) translateZ(150px);
background:blue;
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:green;
}
#cube .five {
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
background:orange;
}
#cube .six {
-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
}
#cube:hover{
transform:rotateY(90deg);
}
但是效果似乎不相同。
你怎么认为是实现这一目标的第一小提琴??所需的最小的div
What do you think is the minimum divs needed to achieve this first fiddle??
感谢。
推荐答案
更新：因此，一个轻微的上面对存在的必要＆hellip误解;所以这个更新是针对的前的和的侧的脸转。
Update: So a slight misunderstanding on which faces need to exist… so this update is for a front and side face rotation.
然而，在下面的原来的答案，点1）和2）仍与code有效的问题。分3），4）不再适用，因为他们用的回的脸上关注。剩余的CSS规则可以被删除。您也可以拉在透视的包装给多维数据集的少平看 - 看的 更新演示 。
However, in the original answer below, points 1) and 2) are still valid problems with the code. Points 3) and 4) no longer apply since they were concerned with the back face. The remaining CSS rules can be removed. You could also pull in the perspective wrapper to give the cube a "less flat" look - see updated demo.
HTML
<div id="experiment">
<div class="cube">
<div class="face front">
front face
</div>
<div class="face side">
side face
</div>
</div>
</div>
CSS
#experiment {
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
}
.cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform .5s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform .5s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 300px;
width: 300px;
padding: 0px;
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
.cube .front {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
background-color:red;
}
.cube .side {
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
background-color:orange;
}
.cube:hover{
-webkit-transform:rotateY(90deg);
}
原来的答案
有4问题演示code，所以让我们来看看他们的个人，看到了解决方案，以每个人是什么：
There are 4 problems with the demo code, so let's look at them individually and see what the solution to each one is:
1）HTML有针对的前阶级一个错字的脸 - 它缺少研究
1) the HTML has a typo on class for the front face - it is missing an r
＆LT; DIV CLASS =面子字体＆GT; 而不是＆LT; DIV CLASS =脸部正面＆GT;
2）WebKit浏览器，你需要使用prefixed财产变换
2) For Webkit browsers you need to use the prefixed property for transform
-webkit-变换：rotateY（90度）;对而不是变换：rotateY（90度）;
3）的回的你选择的脸是错误的脸。你已经改变用途的的左的意外脸。该的前的脸是正确的，这是一个＆LT; DIV＆GT; 翻译 150像素向外。所以相应的回的面孔应了一句翻译 -150px 向内。但是，如果我们仅仅做到这一点，该位置将是正确的，但在周围的立方体背面会倒退最终的中心旋转。所以正确的回的脸是最初由180度旋转的之一;周围的是轴。然而，围绕着是轴沿以Z 翻译仍然需要 + 150像素旋转，而不是 -150px 。
3) The back face you have chosen is the wrong face. You have repurposed the left face by accident. The front face is correct, which is a <div> translated 150px outwards. So the corresponding back face should be the one translated -150px inwards. However, if we just do that, the position would be correct but when rotated around the centre of the cube the back face would end up backwards. So the correct back face is the one that is initially rotated by 180° around the Y axis. However, by rotating around the Y axis the translation along Z still needs to be +150px and not -150px.
.cube .back{
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:orange;
}
4）的旋转，以获得的回的脸变成其中的前的开始应该是180度旋转的位置;而不是90度;
4) The rotation to get the back face into the position where the front starts should be a rotation of 180° and not 90°
.cube:hover{
-webkit-transform:rotateY(180deg);
}
把所有这些变化给一起 这个演示 。
HTML
<div class="cube">
<div class="face front">
front face
</div>
<div class="face back">
back face
</div>
</div>
CSS
.cube {
position: relative;
margin: 100px auto 0;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform .5s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform .5s linear;
-moz-transform-style: preserve-3d;
}
.face {
position: absolute;
height: 300px;
width: 300px;
padding: 0px;
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
.cube .front {
-webkit-transform: translateZ(150px);
-moz-transform: translateZ(150px);
background-color: red;
}
.cube .back {
-webkit-transform: rotateY(180deg) translateZ(150px);
-moz-transform: rotateY(180deg) translateZ(150px);
background:orange;
}
.cube:hover{
-webkit-transform:rotateY(180deg);
-moz-transform: rotateY(180deg);
transform:rotateY(180deg);
}
这篇关于与CSS3动画立方体状的（只有两个面）效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
