erickeno · April 22, 2013 23:13 · erickeno · Apr 22, 2013
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">	
 	<link rel="stylesheet" href="css/main.css">
 	<link rel="stylesheet" href="css/page.css">
 	
 	<title>CSS3</title>
 </head>
 <body>
  <div id="wrapper">
    <div id="myDiv1" class="mydiv">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ipsum velit. Sed vestibulum quam tellus, sed feugiat est. Ut cursus tempor elementum. Morbi tempus luctus consectetur. Ut iaculis vulputate mauris, eu rutrum est pretium et. Vestibulum convallis, felis eu cursus elementum, dui dolor molestie diam, ac faucibus turpis magna et eros. Curabitur venenatis turpis eu neque pellentesque vitae consequat erat congue. Proin mattis sodales risus, ac tempus sapien sodales vitae. Pellentesque in leo erat. Nulla sagittis aliquam urna rutrum laoreet.
      </p>
  </div>
 </body>
 </html>
diff --git a/main.css b/main.css
 body {
  background: #EEE url('../images/grid_square.png') 50px 50px repeat;
  font-family: arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
 }

 #wrapper {
  width: 960px;
  margin: 0 auto;
 }

 .mydiv {
  position: absolute;
  left: 350px;
  width: 400px;
  height: 400px;
  background-color: #ff9900;
 }

 #myDiv1 {
  top: 50px;
 }

 #myDiv2 {
  top: 450px;
 }

 #myDiv3 {
  top: 1050px;
 }

 .mydiv p {
  padding: 25px;
  line-height: 1.5em;
 }
diff --git a/page.css b/page.css
 #wrapper {
  -webkit-perspective: 800;
 }


 #myDiv1 {
  -webkit-transform: rotateX(30deg);
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/page.css">

	<title>CSS3</title>
	</head>
	<body>
	<div id="wrapper">
	<div id="myDiv1" class="mydiv">
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ipsum velit. Sed vestibulum quam tellus, sed feugiat est. Ut cursus tempor elementum. Morbi tempus luctus consectetur. Ut iaculis vulputate mauris, eu rutrum est pretium et. Vestibulum convallis, felis eu cursus elementum, dui dolor molestie diam, ac faucibus turpis magna et eros. Curabitur venenatis turpis eu neque pellentesque vitae consequat erat congue. Proin mattis sodales risus, ac tempus sapien sodales vitae. Pellentesque in leo erat. Nulla sagittis aliquam urna rutrum laoreet.
	</p>
	</div>
	</body>
	</html>
	body {
	background: #EEE url('../images/grid_square.png') 50px 50px repeat;
	font-family: arial, helvetica, sans-serif;
	margin: 0;
	padding: 0;
	}

	#wrapper {
	width: 960px;
	margin: 0 auto;
	}

	.mydiv {
	position: absolute;
	left: 350px;
	width: 400px;
	height: 400px;
	background-color: #ff9900;
	}

	#myDiv1 {
	top: 50px;
	}

	#myDiv2 {
	top: 450px;
	}

	#myDiv3 {
	top: 1050px;
	}

	.mydiv p {
	padding: 25px;
	line-height: 1.5em;
	}
	#wrapper {
	-webkit-perspective: 800;
	}


	#myDiv1 {
	-webkit-transform: rotateX(30deg);
	}