Cascading Style Sheets: Tutorial - Page 15

The Transform Property

The skew function value makes elements slant along its horizontal and vertical axes. Becareful using this function because it can make elements overlap surrounding elements.
Example: tranform: skew(10deg,15deg);

The scale function value makes elements bigger or smaller. A value of zero makes an item infinitely small, so small that it is invisible. A value greater than one makes it grow while a value less than one makes it shrink. Becareful using this function because it can make elements overlap surrounding elements.
Example: transform: scale(-1);, transform: scale(0.5);

The rotate function value is used with the transform property to rotate an element. Becareful when rotating elements as they can overlap bordering elements. Valid values are negative or positive degrees.
For example, transform: rotate(-90deg); or transform: rotate(45deg);.

Multiple transforms are possible: transform: scale(0.5) skew(25deg,10deg) rotate(15deg);

The Transition Property

A transition is an animation from one CSS property to another.

button {
	background-color: navy;
	background-image: none;
	color: #fff;
	transition-property: background;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
	border: outset;
}
button:hover {
	background-color: orange;
	color: #000;
	border-color: #000;
}

Only the background is animated while the border and text are not. This is because the transition-property is set to only animate the background. Typically (and conveniently), use the all value which will animate all changes.

Click here to animate this image.

The code for this is as follows (a little JavaScript is needed):

#imgAnimate {
	transform: rotate(0deg) skew(0deg,0deg);
	transition-property: all;
	transition-timing-function: ease-in-out;
	transition-duration: 5s;
}

<script type="text/javascript">
	var indexImg = 0;
	function animateImg(i) {
		if (i % 2 == 0)
			document.getElementById("imgAnimate").style.transform = "rotate(360deg) skew(10deg,25deg)";
		else
			document.getElementById("imgAnimate").style.transform = "rotate(0deg) skew(0deg,0deg)";
	}
</script>
<img id="imgAnimate" src="/img/falselogo.png" />

Specify a delay using the transition-delay property. For example: transition-delay: 0.5s;

Browser Compatibility

Some properties and some values require a -webkit-, -o-, -moz-, and -ms- prefix to work with older browsers. When in doubt, use them all. For example:

#header {
	-webkit-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
	-ms-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
	-o-box-shadow: 5px 5px 7px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 7px rgba(0,0,0,0.5);

	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);

	background: -webkit-radial-gradient(circle, yellow, blue);
	background: -moz-radial-gradient(circle, yellow, blue);
	background: -ms-radial-gradient(circle, yellow, blue);
	background: -o-radial-gradient(circle, yellow, blue);
	background: radial-gradient(circle, yellow, blue);

	-webkit-transition: all 0.75s
	-moz-transition: all 0.75s
	-ms-transition: all 0.75s
	-o-transition: all 0.75s
	transition: all 0.75s
}

The Popular <CENTER> tag

The HTML element <center> has been deprecated. It was useful to center a container, like a <div> but not center its contents. To replace it and do the same using CSS:

<div style="text-align:center; width:100%">
	<div style="margin:auto; text-align:left; width: 50%; padding: 10px; border: 1px solid black;">
		this text's container is centered, the text is not
	</div>
</div>

This concludes the CSS3 tutorial.

Comment