415 738 6082

Blog

Portfolio 3D Flip Animation using CSS3





















Using CSS3′s 3D transform properties, this is how to create a convincing 3D card flip animation. You can display any HTML on either side of the card. Our example is from a portfolio page. The front of the card displays a screencap of one of our websites, while hovering over the image will cause the card to flip around, revealing the title of the project, as well as a short description and a button to view the full project page.

Example: Hover over the image to view the animation.

Paris Arrondissement 7

Real Estate Web Design

View Project

A note on browser support: Most modern browsers will support this effect. However, there are issues with IE10 and below. Take that into consideration and prepare a fallback plan for IE.

Our box will consist of 4 main elements. The main containing div .project_container, the item div .item, which will house the two sides of the card, and nested inside, the front .card and the back .card.back.

The HTML:

 
<div class="project_container">
   <div class="item">
      <div class='card'><img src="img/Paris_Apt.jpg" /></div>
      <div class='card back'>
         <div class="overlay text_holder">
            <h1><a href="#">Domicile Design</a></h1>
            <p>WordPress Website Design SEO</p>
            <a class="link" href='#'>View Project</a>
	 </div>
      </div>
   </div>
</div>

Next, we’ll apply our structural and aesthetic styles.


/* Make sure the image doesn't overflow the div */
img { max-width: 100%; }

.project_container {
   max-width: 337px;
   height: 195px;
}
.item {  
   max-width: 337px;
   height: 195px;
   display: block;
}
.card {
   position: absolute;
   max-width: 337px;
   height: 195px;
   display: table;
}
.card.back {
   background-image: url('img/Paris_Apt.jpg');
   background-size: cover;
}
.text_holder {
   padding: 25px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.overlay {
   background: rgba(0,0,0,0.6);
   max-width: 337px;
   height: 195px;
   position:absolute;
   z-index: 1;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   display: block;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
h1 {
   font-size: 19px;
   margin: 0;
   text-transform: uppercase;
}
h1 a {
   color: #fff;
}
h1 a:hover {
   color: #2B905B;
}
.project_container p {
   font-size: 15px;
   color: #bababa;
   margin-top: 5px;
}
a {
   text-decoration: none;
   transition: all .2s linear;
}
a:hover {
   transition: all .2s linear;
}
a.link {
   color: #fff;
   padding: 8px 24px;
   border: 1px solid #FFF;
   display: inline-block;
   font-size: 13px;
   position: absolute;
   left: 25px;
   bottom: 25px;
}
a.link:hover {
   color: #000;
   background-color: #fff;
}

Now, for the fun part. We’ll use 4 css properties to create the the 3d effect.

We’ll start by declaring the perspective property on the main container .project_container. This property defines the depth of the element on the 3D plane. This describes how far away the element appears from the viewers eyes.

Next, we’ll use a transform style of preserve-3d on the main item div .item. This forces the element to preserve it’s position in 3D space while transforming.

On the .card element (which will effect both sides of the card), we set backface-visibility to hidden. This will ensure that the opposite side of the card is always hidden.

By default, we need to set the state of the backside of the card to face away from the viewer, we can accomplish this by declaring a transform of rotateY(180deg) to the .side.back element. With the backface-visibility set to hidden, this will effectively hide the backside from view until we preform the flip. We then declare a hover event on the main container .project_container to flip the item div by repeating a transform of rotateY(180deg), this will flip the card around 180 degrees on hover, allowing us to see the backside while hiding the front.

Lastly, we’ll apply some basic transitions so that the the 3D transform will animate from one state to the next. We’ve also animated the bottom property of our button so it rises into the element on hover, adding a little more visual interest. A delay was added to the bottom animation so it doesn’t start animating until the card is partially rotated.

 
.project_container {
   perspective: 1000px;
}
.item {  
   transform-style: preserve-3d;
   transition: all .3s linear; 
}
.project_container:hover .item { 
   transform: rotateY(180deg);
}
.card {
   backface-visibility: hidden;
}
.card.back {
   transform: rotateY(180deg);
}
a {
   transition: all .2s linear;
}
a:hover {
   transition: all .2s linear;
}
a.link {
   transition: bottom .15s ease-in-out, opacity .2s linear, background-color .2s linear;
   opacity: 0;
}
.project_container:hover a.link {
   bottom: 40px;
   transition: bottom .1s ease-in-out .2s, opacity .2s linear, background-color .2s linear;
   opacity: 1;
}

This effect has pretty good support. All modern browsers will support it, with the exception of IE10.

Here’s the finished code with properties added for maximum browser compatibility:

img { max-width: 100%; }

.project_container {
   -o-perspective: 1000px; 
   -moz-perspective: 1000px; 
   -webkit-perspective: 1000px; 
   perspective: 1000px;
   position: relative;	
   z-index: 1;
   max-width: 337px;
   height: 195px;
}
.item {  
   width: 100%;
   height: 100%;
   -webkit-transform-style: preserve-3d;
   -o-transform-style:      preserve-3d;
   -moz-transform-style:    preserve-3d;
   transform-style:         preserve-3d;
   transition:           all .3s linear; 
   display: block;
}
.project_container:hover .item { 
   -webkit-transform:   rotateY(180deg);
   -moz-transform:      rotateY(180deg);
   -o-transform:        rotateY(180deg);
   transform:           rotateY(180deg);
}
.card {
   position: absolute;
   max-width: 337px;
   height: 195px;
   display: table;
   -webkit-backface-visibility:  hidden;
   -moz-backface-visibility:     hidden;
   -o-backface-visibility:       hidden;
   backface-visibility:          hidden;
}
.card.back {
   -webkit-transform:   rotateY(180deg);
   -moz-transform:      rotateY(180deg);
   -o-transform:        rotateY(180deg);
   transform:           rotateY(180deg);
   text-align: left;
   display: table;
   background-image: url('img/Paris_Apt.jpg');
   background-size: cover;
}
.text_holder {
   padding: 25px;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
.overlay {
   background: rgba(0,0,0,0.6);
   max-width: 337px;
   height: 195px;
   position:absolute;
   z-index: 1;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   display: block;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
h1 {
   font-size: 19px;
   margin: 0;
   text-transform: uppercase;
}
h1 a {
   color: #fff;
}
h1 a:hover {
   color: #2B905B;
}
.project_container p {
   font-size: 15px;
   color: #bababa;
   margin-top: 5px;
}
a {
   text-decoration: none;
   transition: all .2s linear;
}
a:hover {
   transition: all .2s linear;
}
a.link {
   color: #fff;
   padding: 8px 24px;
   border: 1px solid #FFF;
   display: inline-block;
   font-size: 13px;
   position: absolute;
   left: 25px;
   bottom: 25px;
   transition: bottom .15s ease-in-out, opacity .2s linear, background-color .2s linear;
   opacity: 0;
}
a.link:hover {
   color: #000;
   background-color: #fff;
}
.project_container:hover a.link {
   bottom: 40px;
   transition: bottom .1s ease-in-out .2s, opacity .2s linear, background-color .2s linear;
   opacity: 1;
}

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

TAGS

No Comment

0

Post A Comment