Thursday, June 6, 2013

CSS3 perspective demo

Css3 perspective property to see the object  from where an element is viewed.
Safari and Chrome
Example code in Firefox:
<!DOCTYPE html>
.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);
<section id="darkred" class="container">
    <div class="box"></div>

<section id="darkblue" class="container">
    <div class="box"></div>

Demo in Firefox: (without using perspective, the result will be rectangle)

No comments:

Post a Comment