mix css3 transform properties without overriding - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Transform

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

Description

mix css3 transform properties without overriding

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.item {<!--   w w  w .  j  av a 2  s  . c om-->
   width:501px;
   height:501px;
   font-size:151px;
   background:blue;
}

.rotate-90 {
   -webkit-transform:rotate(91deg);
   -moz-transform:rotate(91deg);
   -ms-transform:rotate(91deg);
   -o-transform:rotate(91deg);
   transform:rotate(91deg);
}

.tiny-size {
   -webkit-transform:scale(0.26, 0.26);
   -moz-transform:scale(0.26, 0.26);
   -ms-transform:scale(0.26, 0.26);
   -o-transform:scale(0.26, 0.26);
   transform:scale(0.26, 0.26);
}

.both {
   -webkit-transform:rotate(91deg) scale(0.26, 0.26);
   -moz-transform:rotate(91deg) scale(0.26, 0.26);
   -ms-transform:rotate(91deg) scale(0.26, 0.26);
   -o-transform:rotate(91deg) scale(0.26, 0.26);
   transform:rotate(91deg) scale(0.26, 0.26);
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="item both">
    Lorem ipsum do 
  </div>  
 </body>
</html>

Related Tutorials