Make 3D effect on image by adding shadow and transform - HTML CSS CSS Animatable Property

HTML CSS examples for CSS Animatable Property:transform

  1. HOME
  2. HTML CSS
  3. CSS Animatable Property
  4. transform

Description

Make 3D effect on image by adding shadow and transform

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
div.cubus<!--  w w  w. java 2 s  .c  o  m-->
 {
   height:201px;
   width:18px;
   margin-top:-6px;
   box-shadow:inset -11px -9px 17px -10px Chartreuse;
   transform:skew(0, -31deg);
   -ms-transform:skew(0, -31deg);
   -moz-transform:skew(0, -31deg);
   -webkit-transform:skew(0, -31deg);
   -o-transform:skew(0, -31deg);
   float:left;
}

img {
   float:left;
}
</style> 
 </head> 
 <body> 
  <img src="https://www.java2s.com/style/demo/Firefox.png" alt> 
  <div class="cubus"></div>  
 </body>
</html>

Related Tutorials