Transform: scale offsets element - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Zoom

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Zoom

Description

Transform: scale offsets element

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ips</title> 
  <style>
.parent {<!--   w  w  w  .j a  v a 2s .co m-->
   background-color:Chartreuse;
   position:absolute;
   top:51%;
   left:51%;
   -webkit-transform:translate(-51%, -51%);
   -moz-transform:translate(-51%, -51%);
   -o-transform:translate(-51%, -51%);
   -ms-transform:translate(-51%, -51%);
   transform:translate(-51%, -51%);
   width:51%;
}

.child {
   background-color:yellow;
   width:421px;
   height:479.9887640449439px;
   display:inline-block;
   transform:scale(0.544886);
   -webkit-transform:scale(0.544886);
   transform-origin:center;
   display:block;
   margin:0 auto;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="parent"> 
   <div class="child"></div> 
  </div>  
 </body>
</html>

Related Tutorials