practice css_transforme7

<!DOCTYPE html>
<html>
<head>
<style>
.perspective{
 perspective:300px;
 width:150px;
 height:150px;
 background-color:rgb(210,210,210);
}
.internal1{
 transform:rotateY(45deg);
 transform-origin:center;
 width:150px;
 height:150px;
 background-color:lightblue; 
 color:white;
}
.internal2{
 transform:rotateY(45deg);
 transform-origin:left;
 width:150px;
 height:150px;
 background-color:lightblue; 
 color:white;
}
</style>
</head>
<body>
  
<div class="perspective">
 <div class="internal1">
 transform-orign:center;<br>
 </div>
</div>
  
<br>
  
<div class="perspective">
 <div class="internal2">
 transform-orign:left;<br>
 </div>
</div>

</body>
</html>						<!DOCTYPE html>
<html>
<head>
<style>
.perspective{
 perspective:300px;
-webkit-perspective:300px;
 width:150px;
 height:150px;
 background-color:rgb(210,210,210);
}
.internal1{
 transform:rotateY(45deg);
 -webkit-transform:rotateY(45deg); 
 width:150px;
 height:150px;
 background-color:lightblue; 
 color:white;
}
.internal2{
 transform:rotateY(45deg);
 -webkit-transform:rotateY(45deg); 
 transform-origin:left;
 -webkit-transform-origin:left; 
 width:150px;
 height:150px;
 background-color:lightblue; 
 color:white;
}
</style>
</head>
<body>
  
<div class="perspective">
 <div class="internal1">
 transform-orign:center;<br>
 </div>
</div>
  
<br>
  
<div class="perspective">
 <div class="internal2">
 transform-orign:left;<br>
 </div>
</div>

</body>
</html>

Share