CSS transforms exercise

CSS transforms allow you to style and animate links, boxes and other elements in new ways.

Let's start this exercise ..

1. Open your text editor (TextEdit or NotePad).

2. Create and save 2 documents ..

transforms-exercise.html
transforms-exercise-styles.css

3. Copy the following code to your "transforms-exercise.html" document and re-save it.

<html>

<head>
<title>CSS transforms exercise</title>
<link href="transforms-exercise.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">

<div class="rotate-10">Here's something that has been rotated</div>

<div class="scale-70">Here's something that has been scaled</div>

<div class="move-right-up">Here's something that has been moved right and up</div>

<div class="skew">Here's something that has been skewed</div>

<div class="link-transition"><a href="#">Here's a link that fades in and out</a></div>

<div class="box-fade">Here's a box that fades in and out</div>

<div class="box-expands">Here's a box that expands and contracts</div>

</div>

</body>
</html>

4. Copy the following code to your "transforms-exercise.css" document and re-save it.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
#container {
margin-right: auto;
margin-left: auto;
position: relative;
margin-top: 60px;
height: 600px;
width: 700px;
background-color: #000;
}

.rotate-10, .scale-70, .move-right-up, .skew, .link-transition, .box-fade, .box-expands {
background-color: #CCCCCC;
padding: 10px;
width: 300px;
margin: 20px;
}
.rotate-10 {
transform: rotate(+10deg);
-webkit-transform: rotate(+10deg);
-moz-transform: rotate(+10deg);
-o-transform: rotate(+10deg);
transform: rotate(+10deg);
}
.scale-70 {
transform: scale(.5);
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
-ms-transform: scale(.7);
-o-transform: scale(.7);
}
.move-right-up {
transform: translate(400px, -100px);
-webkit-transform: translate(400px, -100px);
-moz-transform: translate(400px, -100px);
-ms-transform: translate(400px, -100px);
-o-transform: translate(400px, -100px);

}
.skew {
transform: skew(-40deg, 10deg);
-webkit-transform: skew(-40deg, 10deg);
-moz-transform: skew(-40deg, 10deg);
-ms-transform: skew(-40deg, 10deg);
-o-transform: skew(-40deg, 10deg);
}
.link-transition a {
text-decoration: none;
font-weight: bold;
color: #000000;
transition: color .5s;
-webkit-transition: color .5s;
-moz-transition: color .5s;
-ms-transition: color .5s;
-o-transition: color .5s;
}
.link-transition a:hover {
color: #FFFFFF;
}
.box-fade {
opacity:1.0;
transition: opacity .5s;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
}
.box-fade:hover {
opacity:0.2;
}
.box-expands {
width: 300px;
text-align: right;
transition: width .5s;
-webkit-transition: width .5s;
-moz-transition: width .5s;
-ms-transition: width .5s;
-o-transition: width .5s;
}
.box-expands:hover {
width:600px;
}

5. Launch a browser (eg Safari) and open "transforms-exercise.html" in it to view the results.

6. Note that each style has 5 versions of the tranisiton properties to ensure it works in all browsers, for example ..

transition: width .5s;
-webkit-transition: width .5s; (for Safari and Chrome)
-moz-transition: width .5s; (for Firefox)
-ms-transition: width .5s; (for Internet Explorer)
-o-transition: width .5s; (for Opera)

The first value (transition: width .5s;) is the one that the World Wide Web consortium hopes will be adopted by all browers eventually.

7. Experiment with properties values in your CSS styles. Try changing ..

transition times - eg .5s

skew values - eg skew(-40deg, 10deg)

translate values - eg translate(400px, -100px)

etc