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

Question

*注意：

这个问题变得很长。我想引导你完成我的思考过程。由于篇幅很长，我为那些不想读到底层的人制作了代码。

基本上我想用css框翻转效果来格式化这个格式 http://codepen.io/KDweber89/pen/MYRaxa

我原本走了这条路： http://codepen.io/KDweber89/pen/WbWQWV

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

我正试图让翻转工作，并保持柔性造型。有没有人有任何想法？

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

我有这种情况，我有一个整洁的应用程序与一些级联flex divs效果。我正在尝试将每个div的2-d盒子翻转以提供其他类型的信息。

这是我原来的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样式，因为我能够让它工作的唯一方法是在我的课程中加入第三个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

所以我的问题很简单，我可以引入我想要的翻转效果，同时结合我原本想要的级联弯曲样式吗？

Answer 1

您的第三个codepen缺少边框的原因是因为此代码中存在一个小问题：

.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

2-d盒子用css翻转，除了级联flex div

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

1 个答案: