使用 CSS3 的动画立方体（只有两个面）效果

Posted 2023-03-06

【中文标题】使用 CSS3 的动画立方体（只有两个面）效果

【英文标题】：Animated cube-like (only two faces) effect with CSS3

【发布时间】：2013-05-13 12:04:45

【问题描述】：

我想复制这个基于this awesome tutorial 准备的jsfiddle（请查看the demo）。但我不想要按键功能，只需要悬停即可。

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 是多少？

谢谢。

【问题讨论】：

我现在有点怀疑我的答案，因为问题中实际上有 2 个 jsFiddle 演示。第一个小提琴没有front和back，它实际上是一个front和side。那么你想要帮助哪个小提琴？另外，你想要 front 和 back 旋转吗？

第二个。我是否无法从小提琴 1 中删除不需要的 div（效果很好），所以我需要第二个小提琴的帮助；仅使用 2 个面。谢谢！

好的，感谢您的澄清。那么应该是哪2张脸呢？您要旋转连接的 2 个面 - front 和 side - 还是 front 和 back哪些没有连接？

我已经更新了与其他演示小提琴匹配的 front 和 side 面旋转的答案。

【参考方案1】：

更新：所以对于哪些人脸需要存在有点误解……所以这次更新是针对正面和侧面面的旋转。

但是，在下面的原始答案中，第 1) 点和第 2) 点仍然是代码的有效问题。第 3) 点和第 4) 点不再适用，因为它们与 背面 面有关。可以删除剩余的 CSS 规则。您还可以引入 perspective 包装器，为立方体提供“不那么平坦”的外观 - 请参阅 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);     

---

原答案

demo代码有4个问题，我们分别看一下，看看每个问题的解决方法是什么：

1) html 的 front 面有一个错字 - 它缺少 r

<div class="face font"> 而不是<div class="face front">

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

-webkit-transform:rotateY(90deg); 而不是transform:rotateY(90deg);

3) 你选择的back脸是错误的脸。您无意中改变了 left 脸的用途。 front 面是正确的，它是一个<div> 向外翻译为150px。所以对应的 back 脸应该是向内翻译的-150px。但是，如果我们只是这样做，位置将是正确的，但是当围绕立方体的中心旋转时，背面最终会向后。所以正确的 back 面是最初围绕Y 轴旋转 180° 的面。然而，通过围绕Y 轴旋转，沿Z 的平移仍然需要为+150px 而不是-150px。

.cube .back
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
   background:orange;

4) 使 back 面进入 front 开始位置的旋转应该是 180° 而不是 90°

.cube:hover
    -webkit-transform:rotateY(180deg);

将所有这些更改放在一起得到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);

【讨论】：

非常感谢！多么详尽的答案和解决方案（您添加的微小 3d 效果）比我要求的更好！

（它似乎在 FF 中不起作用，但我想当我将它转换为 compas mixins 时它会）

乐于助人！哪个部分在 FF 中不起作用？我现在无法测试 FF，但可以看看我明天能做什么。

@andyb：您似乎对 css3-stuff 了解很多，您知道是否可以在与观察者不平行的面上添加阴影？看看我的问题：***.com/questions/17903674/css3-3d-box-with-shadows

享受你的新徽章 ;) 只是一个注释，你的悬停将在 Firefox 中失败