practice css_transforme0

<!DOCTYPE html>
<html>
<head>
<style>
	.rotationalCon{
	perspective:300px;
    -webkit-perspective:300px;  /* for safari  */
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
    -webkit-transform:rotateX(45deg);  /* for safari  */
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
    -webkit-transform:rotateY(45deg); /* for safari  */
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
    -webkit-transform:rotateZ(45deg);  /* for safari  */  
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
</style>
</head>
<body>

<div class="rotationalCon">
   <div class="transformBoxX">
   web4college
   </div>
  </div>

<div class="rotationalCon">
   <div class="transformBoxY">
   web4college
   </div>
  </div>  
  
  <div class="rotationalCon">
   <div class="transformBoxZ">
   web4college
   </div>
  </div>
 
</body>
</html>

Share