I'm trying to make a very basic 3D square.
div {
width: 300px;
height: 300px;
background: #333;
transform: rotateX(50deg);
-webkit-transform: rotateX(50deg);
-moz-transform: rotateX(50deg);
-ms-transform: rotateX(50deg);
Perspective: 300px;
-webkit-Perspective: 300px;
-moz-Perspective: 300px;
-ms-Perspective: 300px;
}
Testing on chrome, RotateX works (as in the box height shrinks) but there's no perspective. Perspective property isn't working. I don't get it, What am I doing wrong?