CODEWITHSUNDEEP
htmlcsswebkittransform
Steffi
Steffi

Reputation: 7067

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

HTML:

<div></div>

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

Upvotes: 2

Views: 2213

Answers (1)

boz
boz

Reputation: 4908

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

http://jsfiddle.net/TD8Hr/

html:

<div>
  <div></div>
</div>

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);
                    }

Upvotes: 5

Related Questions