使用 css 翻转二维框，以及级联 flex div

Question

*注：

这个问题变得很长。我想向您介绍我的思考过程。由于篇幅，我为那些不想读到底的人制作了代码笔。

基本上我希望这种格式具有 css 框翻转效果。
http://codepen.io/KDweber89/pen/MYRaxa

我最初是走这条路的： http://codepen.io/KDweber89/pen/WbWQWV

...并在这里结束，让我的 css 翻转，并失去我的风格。 http://codepen.io/KDweber89/pen/QwPjeW

我正在努力使翻转工作正常进行，并保留弹性样式。有人有什么想法吗？

-------------------------------------------- ------------------------------

我遇到过这样的情况，我有一个带有一些级联 flex divs 效果的简洁应用程序。我正在尝试将二维框翻转与每个 div 结合起来以提供其他类型的信息。

这是我原来的 html 和 css 代码。

<div class="row">
  <div class="item">skittles</div>
  <div class="item">butter fingers</div>
  <div class="item">oreos</div>
  <div class="item">candy</div>
</div>

.row{
  margin: 5% auto;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
}

.item {
  display: inline-block;
  margin: 10px auto;
  padding: 8px 15px;
  border-style: solid;
  border-color: black;  
}

这看起来很漂亮，这是我想继续使用的框架； http://codepen.io/KDweber89/pen/MYRaxa

但是我运行在尝试用它添加翻转元素时遇到了问题。

我最初试过这个：

http://codepen.io/KDweber89/pen/WbWQWV

.row > .item{   
    position: absolute;
    transform: perspective( 600px ) rotateY( 0deg );
    background: white; width: 4em; height: 2em; border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

.row > .itemback{   
    position: absolute;
    transform: perspective( 600px ) rotateY( 180deg );
    background: white; width: 4em; height: 2em; border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
}

.row:hover > .item {
    transform: perspective( 600px ) rotateY( -180deg );
}

.row:hover > .itemback {
    transform: perspective( 600px ) rotateY( 0deg );
}


<div class="row">
  <div class="item">skittles</div>
  <div class="itemback">test</div>

  <div class="item">butter fingers</div>
  <div class="itemback">test</div>

  <div class="item">oreos</div>
  <div class="itemback">test</div>

  <div class="item">candy</div>
  <div class="itemback">test</div>
    </div>

但意识到这并不是解决方案。我最终运行达成的共识解决了我最初的问题，因为它允许我加入很棒的盒子旋转效果....但我最终失去了整洁的 cascade flex 样式，因为这是我能够获得它的唯一方法工作是在我的类中加入第三个 div。

http://codepen.io/KDweber89/pen/QwPjeW

<div class = "row">
    <div class="threed">
        <div class="item"> skittles </div>
        <div class="itemback"> TEST </div>
    </div>

    <div class="threed">  
        <div class="item ">butter fingers</div>
        <div class="itemback"> TEST </div>
    </div>  
</div

所以我的问题很简单，我能否带来我想要的翻转效果，同时结合我最初寻找的层叠 flex 样式？

Answer 1

第三个代码笔中缺少边框的原因是此代码中的一个小问题：

.item .itemback {
  display: inline-block;
  margin: 10px auto;
  padding: 8px 15px;
  border-style: solid;
  border-color: black;  
}

具有“.item .itemback”意味着以下规则应适用于 .itemback 元素在 .item 元素中。您应该在它们之间添加一个逗号，这意味着它将应用于 .itemback 元素和 .item 元素，如下所示：.item, .itemback.

我做了一些其他修改，我认为这更接近您想要做的事情：http://codepen.io/ebelinski/pen/ByEGMG

使用 css 翻转二维框，以及级联 flex div

2-d box flipping with css, in addition to cascading flex divs

html

css

animation

flexbox

-------------------------------------------- ------------------------------