practice css_transitione0

<!DOCTYPE html>
<html>
<head>
<style>
.transition {
    transition-property: opacity, left, color;
    transition-duration: 2s, 2s, 2s;
    -webkit-transition-property: opacity, left, color; /* for safari*/
    -webkit-transition-duration: 2s, 2s, 2s;  /* for safari*/
	width:200px;
	height:200px;
	background-color:lightblue;
	margin:10px;
	color:white;
	opacity:1;
	position:relative;
	left:0px;
  }
.transition:hover{
  opacity:0.4;
  left:100px;
  color:white;
}
.trotationB{
	width:200px;
	height:200px;
	perspective:300px;
	-webkit-perspective:300px; /* for safari*/
}
.trotation{
	width:200px;
	height:200px;
	background-color:lightblue;
	margin:10px;
	transform:rotateY(0deg);
	transition:transform 5s;
	-webkit-transform:rotateY(0deg); /* for safari*/
	-webkit-transition:-webkit-transform 5s; /* for safari*/
}
.trotation:hover{
	transform:rotateY(360deg); 
	-webkit-transform:rotateY(360deg); /* for safari*/
} 
</style>  
</head>
<body>

<div class="transition">
 <p>The position, opacity and color of the text change on hover.</p>
</div>

<div class="trotationB">
 <div class="trotation">
  web4college
 </div>
</div>
  
</body>  
</html>

Share