Pravin Varma

In the post, 3D transformations with CSS3 we learned how to create 3D transformation. In this post we will animate this element in 3D by using the post, Animation with CSS3. We will be creating @keyframes rule to accomplish our goal. Our HTML would be

As we have learned, the parent div creates perspective for our element which is relatively positioned element.

.perCls{ width:300px; height:300px; border:1px solid #CCCCCC;}
#per{ perspective:400px; -webkit-perspective:400px; -webkit-transform:translate(200px,200px)}
#per .box{ width:300px; height:300px; margin:0 auto; position:relative; background:#009933; animation:my 2s;-webkit-animation:my 2s; }

@keyframes my{
from{ transform:rotateY(0deg); -webkit-transform:rotateY(0deg)}
to{ transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
}
@-webkit-keyframes my{
from{ transform:rotateY(0deg); -webkit-transform:rotateY(0deg)}
to{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg)}
}

So, we have created our animation name as ‘my’ and we are rotating the element along Y axis. You can check the demo(Apple Safari) here

In the previous post we learned about rotate transformation method in 2D plane, also we learned how to animate in 2D plane. In this post I am going to explain how to rotate in 3D plane. In 3D space we have x and y axis like in 2D plane but with one more axis which is either going away from you or towards you. Please note that 3D transformation is currently implemented only in webkit browsers like Safari and Chrome, IE10 Platform Preview. The feature also works on iPad, iPhone and Android devices.  First of all we need to write markup for parent and child divs. The parent will act as a stage for the child which we are going to tranform in 3D space.

With #per id we are just creating a stage for the child element and the definition  of perspective property specifies how the child will render in 3D space. Higher value of the perspective gives an impression as if you are viewing the object from a long distance thereby creating a very subtle 3D effect. Lesser value of the perspective gives an impression as if you are viewing the object from very close distance which creates a strong 3D effect. After setting the stage for an object, we are now set for the transformation of the object which we are doing with with #per .box class. We need a position element to do transformation. We have applied some background color.  Note that transform:rotateY(60deg); means you are rotating the element along Y axis. So the element will rotate in x-axis. You can check the demo here

After transforming objects in CSS we are now ready to learn animation. In CSS3, different properties of an object(An HTML element) can be animated by using animation property. There are different sub-properties of animation for specifying animation duration, animation name, animation delay, animation direction etc. For defining animation we use @keyframes rule. The rule describes how the element shall render at a given time in the animation sequence.  Lets check a simple code-

First, lets create a div with a header inside to name it.
<div id=”rotate”><h1>This is test</h1></div>

Next, will create a CSS rule for this div element and define the animation name and its duration.
div#rotate{
animation: rotateMe 1s;
-webkit-animation: rotateMe 1s;
width:200px;
height:100px;
background:yellow;
animation-timing-function:ease;
-webkit-animation-timing-function:ease;
}

We are specifying the animation properties with its name as rotateMe and of the duration of one second for webkit browsers. Then we have specified the height, width and background color, then in the last two lines we have defined the acceleration of the animation.

We have to define keyframes for this animation to work.

@keyframes changeColor
{
from{ transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);}
}
@-webkit-keyframes changeColor{
from { transform:rotateZ(0deg);-webkit-transform:rotateZ(0deg);}
to { transform:rotateZ(360deg),;-webkit-transform:rotateZ(360deg);}
}

We have specified the name of the animation as change Color which we have defined in the rotate id. Then we have specified the properties to animate with their start and end values, i.e. we are rotating the element along z-axis from 0 to 360 degree which is complete rotation. Here is the complete demo.

CSS transform allow us to transform elements in 2D or in 3D space.  With transform property you can scale, skew, translate and rotate an element. The transformations occurs at the current position in the coordinate system of the element which can be 2D or 3D. However, you can change the position of the transformed element by using transform-origin property. The syntax fortransform-origin is

2D transform-origin: x,y;  |  3D: transform-origin: x,y,z;

You will need to use vendor prefixes while using these properties since it is still in a draft mode(2012). For translating an element 20 pixels on right and 30 pixels at the bottom we will need to write the CSS styles like below.

transform:translate(20px, 30px);
-ms-transform:translate(20px, 30px); // IE
-webkit-transform:translate(20px, 30px); //Chrome, Safari
-moz-transform:translate(20px, 30px);//FF
-o-transform:translate(20px, 30px);//Opera

To skew an element by 30 degree along x-axis we will have to write the following lines-

transform:skew(30deg, 0deg);
-webkit-transform:skew(-30deg, 0deg);
-moz-transform:skew(30deg, 0deg);
-o-transform:skew(30deg, 0deg);

To scale an element twice of its current width we will have to write the following styles

transform:scale(2,1);
-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-o-transform:scale(2,1);

You can check the demo of  all the transformation properties here

In the past posts, we see that our navigation is taking the entire viewing space. To optimize the navigation we can take help of jQuery’s hide() and show() functions. Check the Demo here with the explanation given below.

$(document).ready(function(){
if($(‘.navigationWrap’).width()<480)
{
$(‘.navigationWrap’).hide();
$(‘.menuBtn’).css(‘display’,’block’);
} else
{
$(‘.navigationWrap’).show();
}
$(window).resize(function(e) {
if($(‘.navigationWrap’).width()<480)
{
$(‘.navigationWrap’).hide();
$(‘.menuBtn’).css(‘display’,’block’);
}
else
{
$(‘.menuBtn’).hide();
$(‘.navigationWrap’).show();
}
});
$(‘.menuBtn’).click(function(e) {
$(‘.navigationWrap’).slideToggle();
});
});

On loading the document, we are checking if the size of the navigation wrapper is less than 480px i.e. if the screen size of the device in which the document is currently being viewed is less than 480px. If it is true then we are hiding the navigation and showing an anchor as a Menu button which will act as a toggle button.

I have written one more event handler function for window re-size. I have used the same logic for this block also that is used in the onReady. In the end I have applied a slideToggle function to the navigation Wrapper on click() event for the menu button. With this code we have optimized the screen for small devices.

You might have used the media attribute while attaching styles to target screen or sometimes to target printer by using ‘screen’ and ‘print ’ media types. Brallie, handheld, projection etc are the media types along with the above two that were supported in CSS2 and HTML4. By using these media types you can target any specific media. CSS3 introduces a new feature to make things responsive called as Media Query. It checks for the certain  attribute  like width, height and color and applies the respective stylesheet. For example-

<link rel=”stylesheet”   media=”screen and (color)”   href=”stylesheet.css” />

The above line means that the styles stylesheet would be applied to the media type of screen and the media must be color screen. Media Query is a logical expression which is either true or false.  If it is true respective stylesheet would be applied. So we can have Media Queries depending on the type of devices we are wishing to target. Consider the following example-

<link rel=”stylesheet”   media=”screen and  (min-width:320px) and (max-width:480px) href=”stylesheet.css” />

The above stylesheet is applied to the document only if the device screen size is 320px or more than that and less than 480px. Note that the use of ‘and’, It is actually working as logical AND. For logical OR we can use comma.  Like color in the first example, we have used min-device-width and max-device-width. These are the features that we use in the Media Query to test about the certain feature of the targeted device based on which the stylesheet is applied. Most of the features accepts ‘min-‘ and ’max-’ prefixes . The complete list of the features is listed below

1. Width
2. Height
3. Device-width
4. Device-height
5. Orientation
6. Aspect ratio
7. Device-aspect-ratio
8. Color
9. Color-index
10. Monochrome
11. Resolution
12. Scan
13. Grid

I am attaching a demo to get the idea about the power of Media Query to make the things responsive. If you are checking this demo on Google’s Chrome, you can either re-size your browser window or click on the settings button at the bottom right of the developer toolbar. Select the User Agent and device metrics. If you are checking the demo on any smart phone, then let me know your feedback. I am continuing this topic in the next post to explore the above listed features.

CSS3 includes transition properties which helps to make certain element to change its current state to a new one in a smooth manner. We see navigation bar at the top of many website. When we hover any link we see many times the background changes  in quick time. With CSS3 transition properties we can animate this change smoothly. Let’s see how can we achieve this..

CSS3 provides us four properties-

1. transition-property
2. transition-duration
3. transition-delay
4. transition-timing-function

Since these are new properties included in CSS3, browsers support this feature with their prefixes,  for chrome we need to use -webkit- prefix with each property.

Let’s start with out HTML code for navigation.

<ul id=”navigation”>
<li><a href=”javascript:void(0)”>Home</a></li>
<li><a href=”javascript:void(0)”>About</a></li>
<li><a href=”javascript:void(0)”>Contact</a></li>
</ul>

We have three menu items in our menu bar with the id ‘navigation’. Let’s add styling for these menu items to align in one line and to have smooth transition effect on hover state.

ul#navigation {
list-style:none;
}

ul#navigation li {
float:left;
}

ul#navigation li a {
background:#006600;
display:inline-block;
padding:10px 100px;
text-decoration:none;
color:#FFF;
-webkit-transition-property:background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function:ease;
}

ul#navigation li a:hover {
background:#00CC33;
}

In the CSS styles we are animating background color of the menu item by using transition-property. The second line -webkit-transition-duration:1s specifies that the transition will take one second to shift from old value to a new value. The third line -webkit-transition-timing-function:ease; specifies how the transition will change its speed over its duration.

Now we have to specify a hover style in which we have specified a different color. When we will roll over any of the menu item, the background color of that menu item will change from the default color to the color specified in the hover style in a smooth manner. Here is the final demo.