CSS

Scale Down an Iframe


Recently I had to make a minimized version of an iframe. It shows the website with the correct CSS, but just smaller. With CSS3 transforms you can scale down (or up) an iframe for a preview type of iframe.

HTML iframe

1
<iframe class="miniiframe" src="http://yayprogramming.com"></iframe>

CSS3 Minimized iframe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.miniiframe
{
    width: 1310px;
    height: 765px;
   -moz-transform-origin: top left;
   -webkit-transform-origin: top left;
   -o-transform-origin: top left;
   -ms-transform-origin: top left;
   transform-origin: top left;
   -moz-transform: scale( 0.34, 0.34); 
   -webkit-transform: scale( 0.34, 0.34); 
   -o-transform: scale( 0.34, 0.34);
   -ms-transform: scale( 0.34, 0.34);
   transform: scale( 0.34, 0.34); 
   border: 0;
}

http://codepen.io/hunterlong/pen/YGWYPp


View Comments
There are currently no comments.