html - 除了级联 flex div 之外，还可以使用 css 翻转二维框

Question

*注:

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

基本上我想要这种带有 css 框翻转效果的格式。
http://codepen.io/KDweber89/pen/MYRaxa

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

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

我正在尝试让翻转工作正常进行，并保留 flex 样式。有人有什么想法吗？

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

在这种情况下，我有一个带有一些级联 flex div 效果的简洁应用程序。我正在尝试将二维框翻转与每个 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>

但意识到这并不是解决方案。我最终遇到的共识解决了我最初的问题，因为它允许我加入很棒的盒子旋转效果......但我最终失去了整洁的级联 flex 风格，因为我能够让它工作的唯一方法是在我的类(class)中加入第三个 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”意味着以下规则应适用于 .item 元素内的 .itemback 元素。您应该在它们之间添加一个逗号，这意味着它将应用于 .itemback 元素和 .item 元素，如下所示:.item, .itemback。

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