Transitions & Transforms - Exercise

Contact Us or call 1-877-932-8228
Transitions & Transforms - Exercise

Transitions & Transforms

Duration: 15 to 25 minutes.

In this exercise, you will continue to work on Stories.html by applying transitions and transforms to various elements on the page.

  1. Open TransformsTransitions/Exercises/Stories.html.
  2. Add some transitions and transforms to the page. You may do this using inline styles, an embedded style sheet and/or an external style sheet. You are also welcome to add tags to the page. The object of this exercise is to get used to working with transitions and transforms.
  3. When you are done, open Stories.html in your browser to see the results. You are welcome to go back to the code and continue to work.

Solution:

TransformsTransitions/Solutions/Stories.html
<html>
<head>
<title>Stories</title>
<style type="text/css">
	h1
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: x-large;
	}
	
	h2
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-style: italic;
		font-weight: normal;
		letter-spacing: .25em;
		word-spacing: .4em;
		margin-bottom: 20px;
		text-align: center;

		transform: rotate(3deg);
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		-o-transform: rotate(3deg);
	}
	
	p
	{
		font-family: "Comic Sans MS", Times, serif;
		font-size: small;
		line-height: 1.2;
		text-indent: 2em;
	}
	
	a
	{
		font-style: italic;
		font-weight: bold;
	}
	
	.topLink
	{
		font-family: "Comic Sans MS";
		font-size: medium;
		font-variant: small-caps;
		font-style: normal;
		font-weight: normal;
	}
	
	.BackToTop
	{
		text-decoration: none;
		text-transform: capitalize;
		border-style: groove;
		border-color: #0000ff;
		border-bottom-width: 5px;
		border-left-width: 5px;
		border-top-width: 2px;
		border-right-width: 2px;
		padding: 4px;
	}
	
	div
	{
		padding-top: 2px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 2px;
		margin-bottom: 15px;

		-moz-transition:padding 2s;
		-webkit-transition:padding 2s;
		-o-transition:padding 2s;
		transition:padding 2s;
	}

	div:hover
	{
		padding-top: 27px;
		padding-left: 35px;
		padding-right: 35px;
		padding-bottom: 27px;
	}
	
	body
	{
		margin: 0px;
		border: 40px ridge #cc6666;
		padding: 15px;
		background-color: #ffff99;
	}
</style>
</head>
<body>
<h1 id="top">Stories</h1>
<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br>
<a href="#alice" class="topLink">A Mad Tea-Party</a><br>
<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br>

<hr>

<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2>
<div style="background-image: url(Images/poohsmall.gif); 
			background-repeat: no-repeat; background-color:#ff9900; 
			color:#000066;
			border-radius:10px;
			box-shadow: 5px 5px 2px #CCC;">
<p>Pooh always liked a little something
---- C O D E   O M I T T E D ----
 and said to himself 'Silly Old Bear!'</p>
</div> 
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2>
<div style="background-image: url(Images/TeaParty.gif); 
			background-position:right; background-repeat: no-repeat;">
<p>There was a table set out under a tree
---- C O D E   O M I T T E D ----
that's the same thing, you know.'</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>

<hr>

<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2>

<div style="background-image: url(Images/Cupid.gif); color:#ff3333; border-radius:10px;">
<p>Along time ago, there lived an old poet,
---- C O D E   O M I T T E D ----
 and you know, too, how ill-behaved he is!</p>
</div>
<a href="#top" class="BackToTop">Back to top</a>
</body>
</html>

We added a transition to the div element for each story, adding extra padding (over a two-second delay) when the user mouses over each story's text content.

We also added a rotate transform to each story's h2 title, rotating each title by three degrees.