ACTIVITY:

LEARNING CSS3 – ANIMATIONS AND TRANSITIONS – BUILDING A BICYCLE IN CSS3

You will use a combination of basic HTML, CSS and some CSS transforms in order to “draw” a bicycle on a web page, using no images at all.

To create the bicycle, you need a div for each of the major components of a bike frame. The parts of the bike you will be building are the forks, the top tube, the down tube, the seat stays, the chain stays and the wheels.

You will start with a basic outline of all the components of the frame.

Try it Out!

  1. If the folder does not already exist, create a new folder in your MySites folder called CSS3_Transforms.
  1. If necessary, locate the folder CSS3_Transforms_Code on the K drive and copy the contents to your CSS_Transforms folder
  1. If necessary, define a new Dreamweaver site called CSS3_Transforms and set the root folder as the CSS3_Transforms folder which you have just created.
  1. Create a new HTML5 document and save the page as bike.html.

The Basic Bicycle Frame (bike.html)

To begin, you need to give the container div id = "bike" element some basic styles. You’ll give it a specific size and set the position to relative so that you can position the inner div elements relative to this outer containing div.

  1. Enter the following code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Building a Bicycle in CSS3</title>

<link rel="stylesheet" href="css/bikestyles.css">

<script type="text/javascript" src="js/modernizr.custom.57498.js"</script>

</head>

<body>

<div id="bike">

<div id="frametop"</div>

<div id="framechainstay"</div>

<div id="framefork"</div>

<div id="frameseattube"</div>

<div id="frameseatstay"</div>

<div id="framedowntube"</div>

<div class="handlebars">

<div id="backwheel">

<div id="frontwheel">

</div>

</body>

</html>

  1. Create a new CSS document and save the page as bikestyles.css.

Styling the Containing Bike div (bikestyles.css)

  1. Enter the following code:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

Creating Bicycle Wheels with border-radius

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

Placing the Bicycle Wheels

To finish the wheel outlines, you place each of them in different locations, by setting the left property separately for each wheel.

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

  1. View bike.html in a browser:

The Spokes for the Wheels

You will now add a hub and some spokes for each wheel.

  1. Edit bike.html as follows:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Building a Bicycle in CSS3</title>

<link rel="stylesheet" href="css/bikestyles.css">

<script type="text/javascript" src="js/modernizr.custom.57498.js"</script>

</head>

<body>

<div id="bike">

<div id="frametop"</div>

<div id="framechainstay"</div>

<div id="framefork"</div>

<div id="frameseattube"</div>

<div id="frameseatstay"</div>

<div id="framedowntube"</div>

<div class="handlebars">

<div id="backwheel">

<div class="center"</div>

<div class="spoke1"</div>

<div class="spoke2"</div>

<div class="spoke3"</div>

<div class="spoke4"</div>

<div class="spoke5"</div>

</div>

<div id="frontwheel">

<div class="center"</div>

<div class="spoke1"</div>

<div class="spoke2"</div>

<div class="spoke3"</div>

<div class="spoke4"</div>

<div class="spoke5"</div>

</div>

</div>

</body>

</html>

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

Anchoring the Spokes with transform-origin

Before you rotate the spoke div elements you need to set up some common styles that they will all share. The spokes will have a common size, colour and position.

Drawing and Positioning the Wheel Hubs

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

  1. View bike.html in a browser

Rotating the Spokes with transform: rotate

Now that you have the common styles, the last step is to rotate each spoke in increments of 72 degrees (because you have five spokes, and 360 degrees / 5 = 72). Since the first spoke will have a rotation of 0 degrees, you need not style it.

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

Drawing and Positioning the Wheel Hubs

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

.spoke2 {

-webkit-transform: rotate(72deg);

-moz-transform: rotate(72deg);

-ms-transform: rotate(72deg);

-o-transform: rotate(72deg);

transform: rotate(72deg);

}

.spoke3 {

-webkit-transform: rotate(144deg);

-moz-transform: rotate(144deg);

-ms-transform: rotate(144deg);

-o-transform: rotate(144deg);

transform: rotate(144deg);

}

.spoke4 {

-webkit-transform: rotate(216deg);

-moz-transform: rotate(216deg);

-ms-transform: rotate(216deg);

-o-transform: rotate(216deg);

transform: rotate(216deg);

}

.spoke5 {

-webkit-transform: rotate(288deg);

-moz-transform: rotate(288deg);

-ms-transform: rotate(288deg);

-o-transform: rotate(288deg);

transform: rotate(288deg);

}

  1. View bike.html in a browser.

Drawing the Frame

Now you need to style the bicycle frame and position each part in the right spot. You can begin with what each part of the frame will have in common – height, background-color and border-radius.

You’ll set each portion of the frame to be absolutely positioned, and you’ll set the z-index to 2 in order to ensure that the frame sits on top of the hub and spokes.

Setting the Bike Frame’s Default Styles

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

.spoke2 {

-webkit-transform: rotate(72deg);

-moz-transform: rotate(72deg);

-ms-transform: rotate(72deg);

-o-transform: rotate(72deg);

transform: rotate(72deg);

}

.spoke3 {

-webkit-transform: rotate(144deg);

-moz-transform: rotate(144deg);

-ms-transform: rotate(144deg);

-o-transform: rotate(144deg);

transform: rotate(144deg);

}

.spoke4 {

-webkit-transform: rotate(216deg);

-moz-transform: rotate(216deg);

-ms-transform: rotate(216deg);

-o-transform: rotate(216deg);

transform: rotate(216deg);

}

.spoke5 {

-webkit-transform: rotate(288deg);

-moz-transform: rotate(288deg);

-ms-transform: rotate(288deg);

-o-transform: rotate(288deg);

transform: rotate(288deg);

}

#bike div[id*="frame"] {

height: 10px;

background-color: red;

position: absolute;

z-index: 2;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

Next, you position the two parts of the frame that don’t require any rotation at all – the top of the frame and the chain stay.

Styling the Top of the Frame and the Chain Stay

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

.spoke2 {

-webkit-transform: rotate(72deg);

-moz-transform: rotate(72deg);

-ms-transform: rotate(72deg);

-o-transform: rotate(72deg);

transform: rotate(72deg);

}

.spoke3 {

-webkit-transform: rotate(144deg);

-moz-transform: rotate(144deg);

-ms-transform: rotate(144deg);

-o-transform: rotate(144deg);

transform: rotate(144deg);

}

.spoke4 {

-webkit-transform: rotate(216deg);

-moz-transform: rotate(216deg);

-ms-transform: rotate(216deg);

-o-transform: rotate(216deg);

transform: rotate(216deg);

}

.spoke5 {

-webkit-transform: rotate(288deg);

-moz-transform: rotate(288deg);

-ms-transform: rotate(288deg);

-o-transform: rotate(288deg);

transform: rotate(288deg);

}

#bike div[id*="frame"] {

height: 10px;

background-color: red;

position: absolute;

z-index: 2;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#frametop {

width: 163px;

top: 20px;

left: 158px;

}

#framechainstay {

top: 131px;

left: 104px;

width: 85px;

}

Rotating the Frame Fork and Seat Tube with transform: rotate

Styling the Fork and the Seat Tube

Now you create the fork and the seat tube, which are parallel to each other and thus require the same rotation.

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

.spoke2 {

-webkit-transform: rotate(72deg);

-moz-transform: rotate(72deg);

-ms-transform: rotate(72deg);

-o-transform: rotate(72deg);

transform: rotate(72deg);

}

.spoke3 {

-webkit-transform: rotate(144deg);

-moz-transform: rotate(144deg);

-ms-transform: rotate(144deg);

-o-transform: rotate(144deg);

transform: rotate(144deg);

}

.spoke4 {

-webkit-transform: rotate(216deg);

-moz-transform: rotate(216deg);

-ms-transform: rotate(216deg);

-o-transform: rotate(216deg);

transform: rotate(216deg);

}

.spoke5 {

-webkit-transform: rotate(288deg);

-moz-transform: rotate(288deg);

-ms-transform: rotate(288deg);

-o-transform: rotate(288deg);

transform: rotate(288deg);

}

#bike div[id*="frame"] {

height: 10px;

background-color: red;

position: absolute;

z-index: 2;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#frametop {

width: 163px;

top: 20px;

left: 158px;

}

#framechainstay {

top: 131px;

left: 104px;

width: 85px;

}

#framefork, #frameseattube {

top: 75px;

left: 270px;

width: 123px;

-webkit-transform: rotate(75deg);

-moz-transform: rotate(75deg);

-ms-transform: rotate(75deg);

-o-transform: rotate(75deg);

transform: rotate(75deg);

}

#frameseattube {

left: 112px;

}

  1. View bike.html in a browser.

Completing the Frame

The last parts of the frame are the seat stay (which connects the seat to the rear hub) and the down tube.

Styling the Seat Stay and the Down Tube

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

.spoke2 {

-webkit-transform: rotate(72deg);

-moz-transform: rotate(72deg);

-ms-transform: rotate(72deg);

-o-transform: rotate(72deg);

transform: rotate(72deg);

}

.spoke3 {

-webkit-transform: rotate(144deg);

-moz-transform: rotate(144deg);

-ms-transform: rotate(144deg);

-o-transform: rotate(144deg);

transform: rotate(144deg);

}

.spoke4 {

-webkit-transform: rotate(216deg);

-moz-transform: rotate(216deg);

-ms-transform: rotate(216deg);

-o-transform: rotate(216deg);

transform: rotate(216deg);

}

.spoke5 {

-webkit-transform: rotate(288deg);

-moz-transform: rotate(288deg);

-ms-transform: rotate(288deg);

-o-transform: rotate(288deg);

transform: rotate(288deg);

}

#bike div[id*="frame"] {

height: 10px;

background-color: red;

position: absolute;

z-index: 2;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#frametop {

width: 163px;

top: 20px;

left: 158px;

}

#framechainstay {

top: 131px;

left: 104px;

width: 85px;

}

#framefork, #frameseattube {

top: 75px;

left: 270px;

width: 123px;

-webkit-transform: rotate(75deg);

-moz-transform: rotate(75deg);

-ms-transform: rotate(75deg);

-o-transform: rotate(75deg);

transform: rotate(75deg);

}

#frameseattube {

left: 112px;

}

#frameseatstay {

top: 78px;

left: 66px;

height: 6px !important;

width: 130px;

-webkit-transform: rotate(-65deg);

-moz-transform: rotate(-65deg);

-ms-transform: rotate(-65deg);

-o-transform: rotate(-65deg);

transform: rotate(-65deg);

}

#framedowntube {

width: 170px;

top: 78px;

left: 165px;

-webkit-transform: rotate(-40deg);

-moz-transform: rotate(-40deg);

-ms-transform: rotate(-40deg);

-o-transform: rotate(-40deg);

transform: rotate(-40deg);

}

Finishing the Bike with a Seat and Handlebars

To put the finishing touches on the bicycle you should add a seat and handlebars. You’ll need to combine two transforms together to achieve the desired effect.

Adding div Elements for the Handlebars and the Seat

  1. Edit bike.html as follows:

<div id="seat">

<div id="base"</div>

<div id="nose"</div>

</div>

<div class="handlebars">

<div id="post"</div>

<div id="bar"</div>

<div id="handle"</div>

</div>

Styling the Bike Handlebars

To style the handlebars you will use positioning to determine the correct position of the container div.

Styling the Handlebars

  1. Edit bikestyles.css as follows:

#bike {

width: 400px;

height: 250px;

position: relative;

margin: 20px 0;

}

#backwheel, #frontwheel {

width: 120px;

height: 120px;

border: 8px solid black;

position: absolute;

top: 68px;

/* using border-radius: 50% doesn't work in certain versions of mobile Safari, so we're using absolute pixel values first, and if 50% isn't understood, these absolulte values will be used. */

-webkit-border-radius: 70px;

-moz-border-radius: 70px;

border-radius: 70px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

}

#backwheel {

left: 35px;

}

#frontwheel {

left: 278px;`

}

.center {

position: absolute;

top: 56px;

left: 58px;

width: 10px;

height: 10px;

border-radius: 5px;

background-color: black;

}

div[class*="spoke"] {

height: 1px;

width: 62px;

background-color: black;

position: absolute;

top: 60px;

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}

.spoke2 {

-webkit-transform: rotate(72deg);

-moz-transform: rotate(72deg);

-ms-transform: rotate(72deg);

-o-transform: rotate(72deg);

transform: rotate(72deg);

}

.spoke3 {

-webkit-transform: rotate(144deg);

-moz-transform: rotate(144deg);

-ms-transform: rotate(144deg);

-o-transform: rotate(144deg);

transform: rotate(144deg);

}

.spoke4 {

-webkit-transform: rotate(216deg);

-moz-transform: rotate(216deg);

-ms-transform: rotate(216deg);

-o-transform: rotate(216deg);

transform: rotate(216deg);

}

.spoke5 {

-webkit-transform: rotate(288deg);

-moz-transform: rotate(288deg);

-ms-transform: rotate(288deg);

-o-transform: rotate(288deg);

transform: rotate(288deg);

}

#bike div[id*="frame"] {

height: 10px;

background-color: red;

position: absolute;

z-index: 2;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

#frametop {

width: 163px;

top: 20px;

left: 158px;

}

#framechainstay {