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

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 441 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
Be Yourself, Back Yourself
Kristie Bennett, Survivor