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.
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
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.
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.
HTML
Next, let’s create a new base HTML document and put the following markup in it As you can see above, we include the front and back in two different ones .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;}
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;}
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);}
jQuery
The jQuery part is pretty simple. First of all, don’t forget to check the jQuery library in the
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
How to use CSS3 3D Rotation to Create Cool OS X Flip Effect: benefits
Faq
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.
