Search

Change Language

Sunday, March 13, 2011

CSS transforms

Rotation 
<style type="text/css">
.rotation {
    -moz-transform: rotate(-20deg);
    background-color:#000;
    width:500px;
    height:500px;
   -webkit-transform: rotate(-20deg);
   -o-transform: rotate(-20deg);
   margin:100px;
}
.skew {
    -moz-transform: skewx(10deg) translatex(150px);
    -moz-transform-origin: bottom left;
    -webkit-transform: skewx(10deg) translatex(150px);
    -webkit-transform-origin: bottom left;
    -o-transform: skewx(10deg) translatex(150px);
    -o-transform-origin: bottom left;
      margin:100px;
}
</style>

<div class="rotation">
  <iframe src="http://www.genioplus.blogspot.com/" width="500" height="500"></iframe>
</div>

<div class="skew">
  <iframe src="http://genioplus.blogspot.com/" width="400" height="200"></iframe>
</div>

Example

0 comments:

Post a Comment