Front effect (CSS3)

1. Click the image to change the effect code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>

<style type= "Text/css" >
. t1{
width:100%;
max-width:440px;
height:250px;
Cursor:pointer; /* index finger icon */
Transition:all 0.6s;
}
. t1:hover{
Transform:scale (1.2);
}


</style>
<body>
<div>

</div>
</body>

2. The image rotation effect code is as follows:

<! DOCTYPE html>

<meta charset= "UTF-8" >
<title></title>
<style>
div,img,body{
margin:0;
padding:0;
}
. box{
height:150px;
width:300px;
margin:0 Auto;
BORDER:2PX solid red;
padding:20px;
}
. Box:hover img{
Transform:rotate (45DEG); /* CSS3 Technology */
-webkit-transform:rotate (45DEG);
-moz-transform:rotate (45DEG);
-o-transform:rotate (45DEG);
-ms-transform:rotate (45DEG);
}
img{
margin:0 Auto;
Display:block;
Transition:all 0.6s ease-in-out;
-webkit-transition:0.6s ease-in-out;
-moz-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
height:150px;
width:300px;
}
</style>

<body>
<div class= "box" >

</div>
</body>

Summary: Cursor:pointer; Represents the index finger icon; Transform CSS3 effect to see http://www.w3school.com.cn/css3/css3_3dtransform.asp for 2D rotation and 3D rotation

Chrome 25 and earlier versions require a prefix-webkit-

Front effect (CSS3)