CODEWITHSUNDEEP
css
Vian Esterhuizen
Vian Esterhuizen

Reputation: 3904

Pure CSS3 rotateY flip with two sides

So I was playing around with CSS3 and HTML5 on my page trying to keep up to date. I was playing with the rotateY setting of the new CSS transform and I was wondering if there was a way to flip something over that it has two different sides but using only CSS and HTML. I searched the Internet and didn't find any tutorials.

Anyway, I came up with this. (Can also be found at the link above, near the bottom of the page.)

Of course, to see this effect, it must be viewed in a Webkit browser.

HTML

<div class="flip">
 <div>
 <img src="images/yyc.jpg" alt="Calgary International Airport"/>
  <section>
  <h3>Image Metadata</h3>
  <p><strong>Where:</strong> Calgary International Airport</p>
  <p><strong>When:</strong> July 25, 2008</p>
  <p><strong>Camera:</strong> Canon EOS 30D</p>
  <p><strong>Photographer:</strong> <a href="http://photo.net/photos/Vian" title="Photo.net">Vian Esterhuizen</a></p>
  </section>
 </div>
</div>

CSS

.flip{
    float:left;
    position:relative;
    width:421px;
    height:237px;
    background:#111;
    border:2px solid #111;
    margin:2px 0;
    -webkit-transition-property: -webkit-transform, background;
    -webkit-transition-duration: 1s, 0;
    -webkit-transition-delay: 0, 0.3s;
    overflow:hidden;
}
.flip:hover{
    -webkit-transform: rotateY(180deg);
}
.flip > div{
    position:absolute;
    left:0;
    top:0;
    width:842px;
    height:237px;   
    overflow:hidden;
    -webkit-transition-property: left;
    -webkit-transition-duration: 0;
    -webkit-transition-delay: 0.3s;
}
.flip > div img{
    float:left;
    width:421px;
    height:237px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0;
    -webkit-transition-delay: 0.3s;
}
.flip > div > section{
    float:left;
    width:401px;
    height:217px;
    padding:10px;
    background:top right url('../images/esterhuizen-photography.gif') no-repeat;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0;
    -webkit-transition-delay: 0.3s;
}
.flip:hover > div{
    left:-421px;
}
.flip:hover > div img, .flip:hover > div > section{
    -webkit-transform: rotateY(180deg);
}

Yes, I realize that's probably way too much markup for such a simple action but I wanted to see if it's possible.

So my question is, I made up this technique, but is there a better, more efficient one out there that I didn't find? Or, is there a better/more efficient way to do what I did?

Thank you

Upvotes: 4

Views: 14849

Answers (5)

kristopolous
kristopolous

Reputation: 1848

I don't think any of these answers are sufficient.

My approach places, in 3-d space, the "back" part of the card a very small amount behind the front part and then flips it. I added an animation to demonstrate it works.

<style>
body {
  /* This could be moved to the card definition to provide a slightly different effect. */
  perspective-origin: center; 
  perspective: 100vh;
}

.card {
  width: 25vw;
  height: 30vw;
  animation: 10s infinite;
  animation-timing-function: linear;
  animation-name: flip; 
  /* This is very important - we need to make sure the flippy respects our z-index */
  transform-style: preserve-3d;
}
.card > div {
  /* Also we need to make sure that we can put things on top of each other easily */ 
  position: absolute;
  height: 100%;
  width: 100%;
}
.front {
  background: red;
}
.back {
  background: blue;
  /* Here's the magic sauce, we put the back slightly behind the front */
  transform: translateZ(-.1px);
}
/* This is more a demonstation that it works more than anything */
@keyframes flip {
  0% {transform: rotate3d(0.5, 0, 0, 0deg); }
  100% {transform: rotate3d(0.5, 0, 0, 360deg); }
}   
</style>
<div class=card>
  <div class=front></div>
  <div class=back></div>
</div>

Upvotes: 0

user8591950
user8591950

Reputation:

This works for me;

HTML

<li class="panel">
<div class="cards">
<div class="front">
  <div id="side1"></div>
</div>
<div class="back">
  <div class="side2">
</div>
</div>
</div>
</li>

CSS

.panel {
width: 300px;
height: 300px;
position: relative;  
-webkit-perspective: 1000;
&:not(:hover) .cards {
-webkit-animation: CardFlip 15s infinite;
-webkit-transform-style: preserve-3d;
}

.cards, .front, .back {
position: absolute;
top: 0;
left: 0;
bottom: 20px;
right: 0;
}
.cards {
-webkit-transition: all 20s linear;
.front {
z-index: 2;
background: url('placeholder.png');
-webkit-backface-visibility: hidden;
}
.back {
  z-index: 1;
  -webkit-transform: scale(-1, 1);
 }
}
}

Note; Its a diagonal flip.

Upvotes: 1

Mike
Mike

Reputation: 9842

How about:

HTML

<div class="flip1">
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
  FLIP 1<br />
</div>
<div class="flip2">
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
  FLIP 2<br />
</div>

CSS

div {
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:linear;
    -webkit-backface-visibility: hidden;
    color: blue;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: bold;
    padding: 20px;
    position: absolute;
}

@-webkit-keyframes flip1 {
    from { -webkit-transform: rotateX(0deg); }
    to { -webkit-transform: rotateX(360deg); }
}

div.flip1 {
    -webkit-animation-name: flip1;
}

@-webkit-keyframes flip2 {
    from { -webkit-transform: rotateX(-180deg); }
    to { -webkit-transform: rotateX(180deg); }
}

div.flip2 {
    -webkit-animation-name: flip2;
}

Upvotes: 3

David Storey
David Storey

Reputation: 30394

I think what you are looking for is -webkit-backface-visibility. This is webkit specific however and not in any standards.

Upvotes: 2

Mogens Beltoft
Mogens Beltoft

Reputation: 69

I was googling for what to put in the -webkit-transition-property to specify that I wanted to rotate an element, so thanks for that :)

Paul Bakaus has a nice flip animation for iPhone, it involves javascript (and jQuery) to make the flip when a button is pressed: http://paulbakaus.com/lab/css/flip/

Upvotes: 0

Related Questions