KEEP AN EAGLE EYE ON EVERYTHING IT

Tips and Insights on:

  • Website, Server, Database monitoring
  • Optimization and Web Design
  • Uptime and Server performance

The magic behind the CSS (part 2)

imagesIn part one of this series we reviewed new background, border and text effects, as well as the @font-face rule. You can perform graphic manipulations, and animations with CSS3 also, this article will introduce you to CSS3 transformations, transitions and animation.

 

2D Transformations

Transformations are supported in the latest versions of all major browsers, but browser specific prefixes are required.

translate()

The translate method can be used to move an element around the browser window. Enter the amount to move the element in pixels from its current location, first on the x-axis (horizontal) and then the y-axis (vertical).

 

div {

transform: translate(50px,100px);

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari and Chrome */

-o-transform: translate(50px,100px); /* Opera */

-moz-transform: translate(50px,100px); /* Firefox */

before translate

Before

after translate

After

rotate()

The rotate method rotates an element by degrees; positive values rotate clockwise, negative values rotate counterclockwise.

div {

transform: rotate(45deg);

-ms-transform: rotate(45deg); /* IE 9 */

-webkit-transform: rotate(45deg); /* Safari and Chrome */

-o-transform: rotate(45deg); /* Opera */

-moz-transform: rotate(45deg); /* Firefox */

}

before rotate

Before

after rotate

After

scale()

The scale method can be used to scale elements up or down. Enter the amount in times to scale the element horizontally then vertically 1 = original size, 2 = 200% larger, 0.5 = 50% smaller, etc.

div {

transform: scale(1.5, 1.5);

-ms-transform: scale(1.5, 1.5); /* IE 9 */

-webkit-transform: scale(1.5, 1.5); /* Safari and Chrome */

-o-transform: scale(1.5, 1.5); /* Opera */

-moz-transform: scale(1.5, 1.5); /* Firefox */

}

scaledUp

scale(1.5,1.5);

scaledDown

scale(0.5,0.5);

skew()

The skew method can be used to turn elements on their x and y axis. Enter the amount to rotate the element in degrees, first on the x-axis (horizontal) and then the y-axis (vertical).

div {

transform: skew(10deg, 10deg);

-ms-transform: skew(10deg, 10deg); /* IE 9 */

-webkit-transform: skew(10deg, 10deg); /* Safari and Chrome */

-o-transform: skew(10deg, 10deg); /* Opera */

-moz-transform: skew(10deg, 10deg); /* Firefox */

}

before skew

Before

after skew

After

3D Transformations

3D transforms are not supported in IE or Opera, for Firefox the –moz- prefix is required and for Safari and Chrome use –webkit-

3D transforms work differently than 2D transformations; they allow changes to be made on the z-axis (toward and away from the viewport, as well as the x-axis (left and right) and y-axis (top and bottom). I think the best to illustrate this is with a little example:

3D rotate example

As you can see 3D transformations add another dimension to be manipulated, the z-axis, this means you can now move elements forward and back in the viewport, as well as, side-to side and up and down. This also means elements can have multiple sides and be rotated in 3-d space as in the example above.

 

Implementing a 3D rotation is similar to 2D rotate only you must specify the axis on which to rotate, and to get the full 3D effect you should include the perspective property on the parent element, this will maintain a constant vanishing point for all child elements.

 

div#bg {

background: rgba(255, 0, 0, 0.4);

perspective: 500px;

-webkit-perspective: 500px;

}

div#fore {

background: rgba(255, 0, 0, 0.8);

transform: rotateX(45deg);

-ms-transform: rotateX(45deg); /* IE 9 */

-webkit-transform: rotateX(45deg); /* Safari and Chrome */

-o-transform: rotateX(45deg); /* Opera */

-moz-transform: rotateX(45deg); /* Firefox */

}

3D rotate example

CSS3 Transitions

You are likely familiar with using state-based CSS changes using pseudo-classes like a:hover { to modify the appearance of a link when the mouse scrolls over it. CSS transitions allow changes in an element’s CSS to occur smoothly over a specified duration, in other words transitions add a simple animation between changes in CSS values.

 

IE has no support for the transition property, other browsers use the vendor prefixes as shown in the example below.

 

To use CSS transitions you need to specify which property to apply the transition to and the duration of the transition in seconds.

 

Example:

a {

transition: color 1s;

}

a:hover {

color: #f2f2f2;

-moz-transition: color 1s; /* Firefox 4 */

-webkit-transition: color 1s; /* Safari and Chrome */

-o-transition: color 1s; /* Opera */

}

transition example

CSS3 Animation

Animation is one of the coolest new features available.  Believe it or not, you can create complex flash style animations strictly in CSS (no JS!).  Unfortunately there is no support yet for CSS animation in IE, other browsers require the vendor prefixes, if you’ve been following along I’m guessing you know what they are by now.

 

There are two properties required to implement animation in CSS, the @keyframes property and animation property.

 

@keyframes is used to specify how other CSS properties should change at different points during the animation, the animation property is used to apply the animation set up in @keyframes to an element with settings properties such as animation-duration, delay, timing, play/pause, iteration-count (times to repeat), etc.

 

Here’s an example using CSS3 animation:

div {

width: 100px;

height: 100px;

background-color: #FF0000;

position: relative;

animation: sample 5s linear 2s infinite;

/* Firefox: */

-moz-animation: sample 5s linear 2s infinite;

/* Safari and Chrome: */

-webkit-animation: sample 5s linear 2s infinite;

/* Opera: */

-o-animation: sample 5s linear 2s infinite;

}

@keyframes sample

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px; rotate(90deg);}

50%  {background: blue; left:200px; top:200px; rotate(180deg);}

75%  {background: green; left:0px; top:200px; rotate(270deg);}

100% {background: red; left:0px; top:0px; rotate(360deg);}

}

@-moz-keyframes sample  /* Firefox */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px; -moz-transform:rotate(90deg);}

50%  {background: blue; left:200px; top:200px; -moz-transform:rotate(180deg);}

75%  {background: green; left:0px; top:200px; -moz-transform:rotate(270deg);}

100% {background: red; left:0px; top:0px; -moz-transform:rotate(360deg);}

}

@-webkit-keyframes sample  /* Safari and Chrome */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px; -webkit-transform:rotate(90deg);}

50%  {background: blue; left:200px; top:200px; -webkit-transform:rotate(180deg);}

75%  {background: green; left:0px; top:200px; -webkit-transform:rotate(270deg);}

100% {background: red; left:0px; top:0px; -webit-transform:rotate(360deg);}

}

@-o-keyframes sample  /* Opera */

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px; -o-transform:rotate(90deg);}

50%  {background: blue; left:200px; top:200px; -o-transform:rotate(180deg);}

75%  {background: green; left:0px; top:200px; -o-transform:rotate(270deg);}

100% {background: red; left:0px; top:0px; -o-transform:rotate(360deg);}

}

This concludes our look into the basics of CSS3 transformations, transitions and animation.  Now you can perform graphic manipulations, and animations with CSS3, for more information checkout the CSS3 tutorial at w3schools.com.

This entry was posted in Website Performance and tagged , , , , , , . Bookmark the permalink.
trusted by
trusted by trusted by trusted by trusted by trusted by
About Monitor.Us

Monitor.Us, the free version of Monitis, the specialist web and cloud systems monitoring service that provides website monitoring, web page load testing, transaction monitoring, application and database monitoring, web page load testing,transaction monitoring, application and cloud resource monitoring, and server and internal network monitoring within one easy-to-use dashboard. Monitor.Us gives home and small business users access to leading-edge availability and performance monitoring within one easy-to-use dashboard. For more information please visit Monitor.Us.

Follow Monitor.Us on Facebook
Follow Monitor.Us on Twitter