Css3 perspective property to see the object from where an element is viewed.
Firefox:
perspective
Safari and Chrome
-webkit-perspective
Example code in Firefox:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: block;
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid #bbb;
}
.box {
width: 100%;
height: 100%;
opacity: .75;
}
#darkred .box {
background-color: darkred;
transform: perspective(600px) rotateY(45deg);
}
#darkblue {
perspective: 600px;
}
#darkblue .box {
background-color: darkblue;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<section id="darkred" class="container">
<div class="box"></div>
</section>
<section id="darkblue" class="container">
<div class="box"></div>
</section>
</body>
</html>
Demo in Firefox: (without using perspective, the result will be rectangle)
No comments:
Post a Comment