动画多维数据集（只有两个面）效果与CSS3 [英] Animated cube-like (only two faces) effect with CSS3
问题描述
我想重现这个jsfiddle我准备基于这个真棒教程（请检查演示） 。但我不想要键盘的功能，只是悬停。
但是只使用2个面（前面和后面）。
我试过，像这样：
#cube {
position：相对;
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;
颜色：#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。
。
更新：所以对于哪些面孔需要存在一些误解…因此此更新适用于前轮和侧轮换。
但是， 1）和2）仍然是代码的有效问题。点3）和4）不再适用，因为他们关心的后面。剩余的CSS规则可以删除。您还可以在透视图包装器中提供多维数据集不太平坦的外观，请参阅 更新的演示 。
HTML
$ b b
< div id =experiment>
< div class =cube>
< div class =face front>
正面
< / div>
< div class =face side>
侧面
< / div>
< / div>
< / div>
CSS
#experiment {
-webkit-透视：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个问题，让我们分别看看它们，看看每个问题的解决方案是：
1）HTML在前面上有一个拼写错误 - 它缺少一个 r p>
< div class =face font> 而不是< div class = 面前>
2）对于Webkit浏览器，您需要使用 code>
-webkit-transform：rotateY（90deg）; > transform：rotateY（90deg）;
3）你选择的您意外地将左面重新使用。 前面是正确的，这是< div> 翻译了 150px 因此，相应的后面应该是向内翻译的 -150px 。然而，如果我们这样做，位置将是正确的，但是当围绕立方体的中心旋转时，背面将向后结束。因此，正确的后面是最初旋转180度的面轴周围的 Y 。但是，通过旋转 Y 轴，沿 Z 的翻译仍然需要 + 150px ，而不是 -150px 。
.cube .back {
-webkit-transform：rotateY（180deg）translateZ（150px）;
-moz-transform：rotateY（180deg）translateZ（150px）;
background：orange;
}
4）旋转以获得到正面开始的位置应该是180°的旋转。不是90°
.cube：hover {
-webkit-transform：rotateY（180deg）;
}
将所有这些更改一起提供 this demo 。
HTML
< div class =cube>
< div class =face front>
正面
< / div>
< div class =face back>
背面
< / 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）;
}
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.
But that only uses 2 faces (front and back).
I tried, like this:
#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);
}
But the effect seems not to be the same.
What do you think is the minimum divs needed to achieve this first fiddle??
Thanks.
Update: So a slight misunderstanding on which faces need to exist… so this update is for a front and side face rotation.
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);
}
Original Answer
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) the HTML has a typo on class for the front face - it is missing an r
<div class="face font"> instead of <div class="face front">
2) For Webkit browsers you need to use the prefixed property for transform
-webkit-transform:rotateY(90deg); instead of transform:rotateY(90deg);
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) 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);
}
Putting all those changes together gives this demo.
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屋！
