使用CSS3生成类似动画的立方体(仅两个面)效果

Question

我想重现这个基于这个很棒的教程准备的jsfiddle (请查看演示).但我不想要键功能,只是悬停.

http://jsfiddle.net/b5rmW/5/

但这只使用了2个面(正面和背面).

我尝试过,像这样:

    #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); 

}

http://jsfiddle.net/5XTeU/1/

但效果似乎不一样.

您认为实现这个第一小提琴所需的最小div是什么？

谢谢.

Answer 1

更新:因此需要对哪些面存在轻微的误解...所以此更新用于正面和侧面旋转.

但是,在下面的原始答案中,第1)和第2点仍然是代码的有效问题.要点3)和4)不再适用,因为他们关心的是背面.其余的CSS规则可以删除.您还可以拉入透视包装,为立方体提供"不太平坦"的外观 - 请参阅更新的演示.

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个问题,所以让我们分别看看它们,看看每个代码的解决方案是什么:

1)HTML在前面的类上有一个拼写错误- 它缺少一个r

<div class="face font"> 代替 <div class="face front">

2)对于Webkit浏览器,您需要使用前缀属性 transform

-webkit-transform:rotateY(90deg); 代替 transform:rotateY(90deg);

3)你选择的背面是错误的.你已经改变用途的左偶然的脸.该前脸是正确的,这是一个<div>翻译150px向外.因此相应的背面应该是-150px向内翻译的背面.但是,如果我们这样做,位置将是正确的,但是当围绕立方体的中心旋转时,背面将向后结束.因此,正确的背面是最初围绕Y轴旋转180°的背面.然而,围绕旋转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);
}

将所有这些更改放在一起就可以进行此演示.

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);
}