Create Cool Flip Effect With CSS3 3D Rotation For UI Design

By . in Coding. Updated on .

There are two types of transform available in CSS3 specification, 2D and 3D. In our previous post, we have discussed on CSS3 Transform 2D. So, this time, we are going to look into transform elements in 3D space and specifically in this post, we are going to also create the OSX Flip Effect.

Click “View demo” below to see how the end result is going to look like.

3D Rotation Syntax

The Rotation in 3D space is basically similar to 2D, which we have discussed previously. To rotate the element vertically, we can write it in this way.

 -webkit-transform: rotateX(Ndeg);
 -moz-transform: rotateX(Ndeg);
 transform: rotateX(Ndeg);

We are also able to flip horizontally this way.

 -webkit-transform: rotateY(Ndeg);
 -moz-transform: rotateY(Ndeg);
 transform: rotateY(Ndeg);

There are many great resources you can take a look at to dig into CSS3 3D Transform further. Below are our recommendations.

OSX Flip Effect

As we mentioned above, we are going to apply CSS3 Transform to create the OSX or iOS flip effect. If you are using these OS, you probably are already familiar with these effects. In OSX, you can mostly find them in the Gadget of the Dashboard.

In the old days, creating such an effect is purely achieved with JavaScript libraries. But today, we are able to make it simpler by combining it with CSS3 Transform.

Assets

This time, we only need the jQuery and this PSD of iOS Passbook from Dribbble for our graphical UI. With Photoshop, we are able to do some adjustment.

Then, pick one of the passbook graphic and save it in two files: the front and the back face. In this case, we picked the Starbuck Passbook, as follows.

HTML

Then, let’s create a new basic HTML document and place the following markup inside the <body>.

<section class="passbook">
    <div class="card front">
        <img src="img/starbuck-front.png">
        <a href="#" class="info flip">i</a>
    </div>
    <div class="card back">
        <ul class="nav">
            <li class="title">Starbuck Coffee</li>
            <li class="button done">
                <a class="flip" href="#">Done</a>
            </li>
        </ul>
        <img src="img/starbuck-back.png">
    </div>
</section>

As you can see above, we contain the front and back face in two different <div>. At the front face, we will have a link, which will flip the Passbook when clicked. Whilst on the back face, we also have a link to flip it back.

CSS

I will assume you have created a new CSS file. In this stylesheet, we will first specify the Passbook dimension and set the transform style to preserve-3d, that way the child elements will be transformed into 3D as well. And, we also added a transition effect to make the flip run smoothly.

Recommended Reading: CSS3 Transform: preserve-3D Documentation

 .passbook {
 position: relative;
 width: 300px;
 height: 380px;
 margin-bottom: 100px;
 
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 transition: 0.5s;
 
 margin-left: 85px;
 }

Then, we also set the card position to absolute, so each card will stack atop one another. We also need to hide the back face with backface-visibility property.

Recommended Reading: CSS3 Transform: backface-visibility Documentation

.card { 
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
Front Face

Now, we add decorative styles to the link on the front face, as follows.

.front .info {
    /* Positioning */
    position: absolute;
    right: 10px;
    bottom: 15px;
    display: block;

    /* Box Model */
    width: 18px;
    height: 18px;
    border-radius: 21px;

    /* Typography */
    font-family: "Georgia", serif;
    font-style: italic;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    color: #fff;

    /* Background */
    background-color: #075621;
}

We also need to position the front face above the back face by specifying the z-index higher.

.front {
  z-index: 1;
}
Back Face

For the back face, we need to initially flip it.

.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

Then, we add decorative styles to the navigation, including changing the text color, adding gradient color to the link button, and positioning it in the proper place.

.back .nav {
    padding: 0;
    margin: 0;
    color: #fff;
    font-size: 12px;
    width: 100%;
    font-weight: bold;
}

.back .nav li {
    display: inline;
    position: absolute;
    top: 18px;
}

.back .nav a {
    font-weight: bold;
    text-decoration: none;
    padding: 7px 10px;
    border: 1px solid #095d25;
    border-radius: 5px;
    color: #fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.5) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(0,0,0,0.5)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(0,0,0,0.5) 100%);
}

.back .nav a:hover {
    background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.55) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(0,0,0,0.55)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.55) 100%);
}

.back .nav .title {
    left: 105px;
}

.button.done {
    right: 10px;
}

Lastly, we add a class to flip the Passbook horizontally, like so.

.rotate-3d {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
jQuery

The jQuery part is rather simple. First, don’t forget to link the jQuery library in the <head>, like so.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

Then, we use toggleClass function from jQuery to apply .rotate-3d class that we have added in the stylesheet above.

<script type="text/javascript">
    $(document).ready(function() {
        $('a.flip').click(function(event) {
            $('.passbook').toggleClass('rotate-3d');
            event.preventDefault();
        });
    });
</script>

That’s all the codes we need. It’s clearly much simpler than purely using JavaScript to achieve a similar effect. As usual, you can now view the demo and the download the source in the links below.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail