How to use CSS3 3D Rotation to Create Cool OS X Flip Effect

How to use CSS3 3D Rotation to Create Cool OS X Flip Effect

Hello friends today we gonna learn about How to use CSS3 3D Rotation to Create Cool OS X Flip Effect. So read this article, How to use CSS3 3D Rotation to Create Cool OS X Flip Effect step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to use CSS3 3D Rotation to Create Cool OS X Flip Effect

Two types of transformation are available in CSS3 specification, 2D and 3D. In our previous post, we talked about CSS3 Transform 2D. So this time we’re going to look at transform elements in 3D space and specifically in this post we’re also going to take the OSX Flip effect

Click on “View demo” below to see what the end result will look like.

back to menu ↑

3D rotation syntax

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

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

This way we can also mirror horizontally.

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

There are many great resources you can check out to dig further into CSS3 3D Transform. Below are our recommendations.

  • An Introduction to CSS 3D Transformations – 24 Ways
  • CSS3 Transform Browser Support – CanIUse.com
  • Adventures In The Third Dimension: CSS 3D Transforms – SmashingMagazine
back to menu ↑

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 this operating system, you are probably already familiar with these effects. In OSX you can usually find them in the dashboard gadget.

In the past, creating such an effect was achieved purely with JavaScript libraries. But today we can make it easier by combining it with CSS3 Transform.

back to menu ↑

Resources

This time we just need the jQuery and this iOS Passbook PSD from Dribbble for our graphical user interface. With Photoshop we can make some adjustments.

Then choose one of the passbook images and save it in two files: the front and the back. In this case, we chose the Starbuck Passbook as follows.

back to menu ↑

HTML

Next, let’s create a new base HTML document and put the following markup in it.

< a href = ”#” class = ”info flip”> i

As you can see above, we include the front and back in two different ones

. On the front we have a link that flips the Passbook when clicked. On the back we also have a link to reverse it.

back to menu ↑

C.S.S

I assume you have created a new CSS file. In this stylesheet, we will first specify the Passbook dimension and set the transformation style to Preserve-3d, that way the underlying elements will also be transformed into 3D. And we also added a transition effect to make the cover smooth.

.passbook {position: relative; width: 300px; height: 380px; margin-bottom: 100px;

-webkit-transform-style: preserve-3d; -moz-transform-style: preservation-3d; transform-style: preserve-3d;

webkit transition: 0.5s; -moz transition: 0.5s; transition: 0.5s;

margin-left: 85px;}

Next, we also set the card position to absolute so that each card is stacked on top of each other. We also need to hide the back with the rear visibility property.

.card {position: absolute;

-webkit-back-visibility: hidden; -moz-back-visibility: hidden; back-visibility: hidden;}

back to menu ↑

Front

Now we’ll add decorative styles to the link on the front as follows.

.front .info {width: 18px; height: 18px; border radius: 21px; font-family: “Georgia”, serif; font-style: italic; background-color: # 075621; color: #fff; text-align: center; position: absolute; right: 10px; bottom: 15px; font size: 11px; line height: 18px; display: block; text decoration: none;}

We also need to place the front over the back by making the z-index higher.

.front {z-index: 1;}

back to menu ↑

Rear end

For the back we have to turn it over initially.

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

Next, we’ll add decorative styles to the navigation, including changing the text color and adding a gradient color to the link buttons and positioning it in the right 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, top left, bottom left, 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 (down, rgba (255,255,255,0.3)) 0%, rgba (0,0,0,0.5) 100%);}. Back after 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, top left, bottom left, 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 (down, rgba (255,255,255,0.4) 0%, rgba (0.0, 0.0.55) 100%);}. Back .nav .title {left: 105px;}.button.done {right: 10px;}

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

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

back to menu ↑

jQuery

The jQuery part is pretty simple. First of all, don’t forget to check the jQuery library in the to link, like so.

We then use jQuery’s toggleClass function to apply the .rotate-3d class we added in the above stylesheet.

Those are all the codes we need. Obviously, it is much easier than using pure JavaScript to achieve a similar effect. As usual, you can now watch the demo and download the resource from the links below.

  • View demo
  • Download source
back to menu ↑

How to use CSS3 3D Rotation to Create Cool OS X Flip Effect: benefits

  • The How to use CSS3 3D Rotation to Create Cool OS X Flip Effect tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to use CSS3 3D Rotation to Create Cool OS X Flip Effect guide is free.

back to menu ↑

Faq

Tutorial summary of How to use CSS3 3D Rotation to Create Cool OS X Flip Effect

In this guide, we told you about the How to use CSS3 3D Rotation to Create Cool OS X Flip Effect; please read all steps so that you understand How to use CSS3 3D Rotation to Create Cool OS X Flip Effect in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to use CSS3 3D Rotation to Create Cool OS X Flip Effect, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to use CSS3 3D Rotation to Create Cool OS X Flip Effect tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to use CSS3 3D Rotation to Create Cool OS X Flip Effect. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to use CSS3 3D Rotation to Create Cool OS X Flip Effect, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to use CSS3 3D Rotation to Create Cool OS X Flip Effect”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to use CSS3 3D Rotation to Create Cool OS X Flip Effect, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo