css perspective and transform css properties testing

i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird. 

with the box i kind of wanted it to be left side wider than the right side, so it looks like its 3D a bit. i think i achieved it, but found that the elements need to me moved around inside that div so that it does not go out of its border. The perspective settings seems strange on the surrounding container, i will have to research this more. 

HTML

<div class='scale-box-wrap' >
 <div class='scale-box scale-3d' >
  scale me!
 </div>
</div>

CSS

.scale-box-wrap {
 perspective:500px;
}
.scale-box {
 height:100px;
 width:100px;
 border:3px solid #EEE;
 border-radius:3px;
}
.scale-3d {
  transform: rotateY(70deg) perspective(70px);
}
scale me!

Other Items in css
Page Views

This page has been viewed 124 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

âĪðŸ‘Đ‍ðŸ’ŧðŸ•đ

Random Quote
For a long time it had seemed to me that life was about to begin - real life. But there was always some obstacle in the way, something to be gotten through first, some unfinished business, time still to be served, or a debt to be paid. Then life would begin. At last it dawned on me that these obstacles were my life.
Alfred D. Souza