*Please read the note:
This question is a bit lengthy as I wanted to explain my thought process. For those who prefer not to read everything, I have created codepens for easy reference.
Essentially, I am looking to achieve CSS box flipping effects like this: http://codepen.io/KDweber89/pen/MYRaxa
Initially, I started with this approach: http://codepen.io/KDweber89/pen/WbWQWV
...and ended up here, where I got the CSS flipping effect but lost my original styles. http://codepen.io/KDweber89/pen/QwPjeW
I'm struggling to make the flipping work while retaining the flex styling. Any ideas?
----------------------------------------------------------------------------
I have an app with cascading flex divs that look great. Now, I want to add 2-D box flipping to provide more information in each div.
Here's the original HTML and CSS code:
<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;
}
The current setup looks good, and I want to build upon it: http://codepen.io/KDweber89/pen/MYRaxa
However, when I tried to add the flipping element, I faced some challenges.
My initial attempt was like this:
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>
However, this solution didn't quite work for me. While it gave me rotating effects, I lost the cascade flex style because I had to include a third div within my classes.
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
In conclusion, can I achieve the desired flipping effect while maintaining the original cascading flex style? That's the challenge I'm facing.