CSS3 3D Animation

The introduction of CSS 3 has changed the over all look and feel of the websites. CSS3 animations; transitions and transforms are the most interesting things in CSS3 ie. 3D animation . CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space. No javascrip, no flash is required for creating 3D animations. It works well in latest browsers and just fine in less capable browsers.

Before we go ahead, we should understand the css3 animation, how the animation property works, how key frames can be used, transitions 

CSS3 3D animation Explained

While we do CSS3 3D animation, we have to know two properties in CSS 3D transforms. One is “Perspective”. To activate 3D space, an element needs perspective. This can be applied with transform property, with the perspective as a functional notation

transform: perspective

Second thing is 3D transform functions. 3D transform uses the same transform propety used for 2D transforms.

CSS3 3D animation Example

Here I am going to give an example of 3D animation using a Mobile. When we hover the phone image it rotates and we are able to see the other side of the mobile.

HTML Structure

<div class="container">
<div class="mobile-front"></div>
<div class="mobile-back"></div>
</div>

CSS required CSS3 3D animation Example

/*Adding a container for the animation*/
.container{
	perspective: 800px;
	-webkit-perspective: 800px;
	width:500px;
	height:500px;
	margin:0 auto;
	border-radius:6px;
	position:relative;
	background: #1e5799;
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 81%, #7db9e8 83%, #3297e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(81%,#2989d8), color-stop(83%,#7db9e8), color-stop(100%,#3297e5));
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 81%,#7db9e8 83%,#3297e5 100%);
	background: -o-linear-gradient(top, #1e5799 0%,#2989d8 81%,#7db9e8 83%,#3297e5 100%);
	background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 81%,#7db9e8 83%,#3297e5 100%);
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 81%,#7db9e8 83%,#3297e5 100%);
}
.mobile-front,
.mobile-back{
        transform-style: preserve-3d; /* Enabling 3D transforms */
	-webkit-transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
        width:255px;
	height: 470px;
        position:absolute;
	top:50%;
	left:50%;
	margin:-235px 0 0 -120px;
        background:url(mobile1.png) no-repeat left center;
	transition:0.8s;
}
.mobile-back{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
        background-position:right center;
}
.container:hover .mobile-front{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.container:hover .mobile-back{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

CSS for CSS3 3D animation Explained

In the first place, we are enabling the 3D transforms. We are using two DIVs for the two sides of the mobile. And by using backface-visibility: hidden, we are hiding the DIVs when they are flipped. We animate the mobile with transition: 0.8s. With the class ‘mobile-back’, we are flipping the DIV which contains the other side of the mobile, to 180 degree as its default state. When we hover the container, we’ll flip the front side and hide the DIV and at the same time, we’ll flip the second container with the back side of the mobile.

Demo

View the live demo for the 3d animation we have done.