Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Why the property "perspective" doesn't work for me?

Why the property "perspective" doesn't work for me?

Problem

HTML:

CSS:

div {
    width: 50px;
    height: 50px;
    background: red;
    border: 10px solid yellow;
    -webkit-perspective: 600px;
    -webkit-transform: perspective(600);
    -moz-transform: perspective(600);
    transform: perspective(600);
}

This doesn't work, it always display a red square... I don't understand why. I use Chrome 23

Problem courtesy of: Steffi

Solution

The Perspective needs to be combined with another transform to be of any use. Have a look at:

http://jsfiddle.net/TD8Hr/

html:

css:

div { padding: 50px; }

div > div {
                width: 50px; 
               height: 50px; 
           background: red;
               border: 10px solid yellow;
  -webkit-perspective: 600px;
    -webkit-transform: perspective(600) rotateY(120deg);
       -moz-transform: perspective(600) rotateY(120deg);
            transform: perspective(600) rotateY(120deg);
                    }
Solution courtesy of: boz

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Why the property "perspective" doesn't work for me?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×