Transform:scale() and z-index order - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Zoom

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

Description

Transform:scale() and z-index order

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.page-body {<!--from   w ww .  java 2  s . com-->
   position:relative;
   height:100vh;
   font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
}

.page-body #blocks-both {
   height:100%;
}

.page-body #blocks-both #block-main, .page-body #blocks-both #block-sidebar {
   transform:scale(0.10);
}

.page-body #blocks-both #block-main {
   transform-origin:100% 0;
   background-color:Chartreuse;
   width:41%;
   height:100%;
   float:left;
   z-index:5;
   position:relative;
}

.page-body #blocks-both #block-sidebar {
   transform-origin:0 0;
   background-color:yellow;
   width:41%;
   height:100%;
   float:right;
   z-index:3;
   position:relative;
}

.page-footer {
   width:100%;
   position:fixed;
   height:4.6em;
}

.page-footer#footer-social {
   background-color:blue;
   z-index:4;
   bottom:4.6em;
}

.page-footer#footer-menu {
   bottom:0;
   background-color:pink;
   z-index:6;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="page-body"> 
   <div id="desc" style="padding:2em;"> 
    <strong>Lorem ipsum</strong>Lorem ipsum dolor sit amet, 
    <strong>Lorem ipsum </strong>Lorem i 
    <strong>Lorem ipsum do</strong>Lorem ipsum dolor sit amet, consectetur adip 
    <strong>Lorem ipsum </strong>Lorem ips 
    <em>Lorem ipsum dolor sit</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie 
   </div> 
   <div id="blocks-both"> 
    <div id="block-main">
      Lorem ipsum dolor sit ame 
    </div> 
    <div id="block-sidebar">
      Lorem ipsum dolor sit amet, 
    </div> 
   </div> 
  </div> 
  <footer class="page-footer" id="footer-social">
    Lorem ipsum dolor sit amet, 
  </footer> 
  <footer class="page-footer" id="footer-menu">
    Lorem ipsum dolor sit amet 
  </footer>  
 </body>
</html>

Related Tutorials