Everything about Web and Network Monitoring
Everything about Web and Network Monitoring
In 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 */
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 */
}
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 */
}
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 */
}
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 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.
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 */
}
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 */
}
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.
