Click and drag to scroll left and right to view all 5 figures.
<!-- figure 11.1 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
div {
height: 75px;
width: 150px;
padding: 10px;
display: inline-block;
border: 1px solid black;
background-color: pink;
text-align: center;
}
#box2 { transform: rotateZ(45deg); }
#box3 { transform: skewX(30deg); }
</style>
</head>
<body>
<h3>Transform</h3>
<div id="box1">Normal shape</div>
<div id="box2">Clockwise Rotation</div>
<div id="box3">Skewing along x-axis</div>
</body>
</html>
<!-- figure 11.4 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.box1 {
height: 200px;
width: 200px;
padding: 10px;
border: 1px solid black;
}
.box2 {
width: 50%; height: 50%;
padding: 50px;
border: 1px solid black;
transform: perspective(400px) rotateY(50deg); }
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">PERSPECTIVE</div>
</div>
</body>
</html>
<!-- figure 11.6 & figure 11.7 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.parent { width: 50%; padding: .5em; }
.parent.perspective { perspective-origin: 100px; perspective: 50px; }
.parent.perspective .child {
transform: rotateX(30deg);
background-color: orange;
}
.child {
margin: .5em;
width: 3em;
height: 3em;
display: inline-block;
border: 1px solid black;
}
.parent.transform .child {
transform: perspective(50px) rotateX(30deg);
background-color: grey;
}
</style>
</head>
<body>
<div class="parent perspective">
<h2>perspective property</h2>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div class="parent transform">
<h2>perspective() function</h2>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
<!-- figure 11.9 & figure 11.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
* { box-sizing: border-box; }
.wrapper { perspective: 1200px; margin: 64px auto; width: 800px; }
.inner { transform: rotateY(40deg); }
.inner figure {
width: 176px;
padding: 16px;
margin-right: 16px;
backgroud-color: rgb(250, 200, 0);
display: inline-block;
}
.inner img { max-width: 100%; }
.inner figure {
text-align: center;
margin: 8px 0;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner">
<figure><img src="images/fractal_pink_spiral.jpg" alt="Abstract">
<figcaption>Abstract</figcaption>
</figure>
<figure><img src="images/pine_forest.jpg" alt="Nature">
<figcaption>Nature</figcaption>
</figure>
<figure><img src="images/surfer.jpg" alt="Sports">
<figcaption>Sports</figcaption>
</figure>
</div>
</div>
</body>
</html>
<!-- figure 11.15 & figure 11.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
<style type="text/css">
.cube {
width: 200px;
height: 200px;
margin: 75px auto;
transform: rotateX(-40deg) rotateY(30deg);
perspective-origin: 50% 50%;
perspective: 1200px;
transform-style: preserve-3d;
}
.face {
position: absolute;
width: 144px;
height: 144px;
line-height: 140px;
font-size: 60px;
text-align: center;
color: black;
background-color: rgba(235, 230, 0, 0.8);
border: 1px solid black;
box-shadow: inset 0 0 10px black; opacity: 0.8;
backface-visibility: visible;
}
.one { transform: translateZ(72px); }
.six { transform: rotateY(180deg) translateZ(72px); }
.four { transform: rotateY(90deg) translateZ(72px); }
.three { transform: rotateY(-90deg) translateZ(72px); }
.five { transform: rotateX(90deg) translateZ(72px); }
.two { transform: rotateX(-90deg) translateZ(72px); }
</style>
</head>
<body>
<div class="cube">
<div class="face one"1></div>
<div class="face six"6></div>
<div class="face four"4></div>
<div class="face three"3></div>
<div class="face five"5></div>
<div class="face two"2></div>
</div>
</body>
</html>