关于转化模板，我先用下面的代码来说。
<!doctype html>
<html lang="en">
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
width:800px;
height:500px;
border:1px solid #000;
margin:0 auto;
}
ul li{
list-style:none;
width:100px;
height:50px;
background-color:red;
text-align:center;
line-height:50px;
}
ul li:nth-child(2){
transform:rotate(30deg);
}
ul li:nth-child(3){
transform:translate(100px,0px);
}
ul li:nth-child(4){
transform:scale(0.5,0.5);
}
ul li:nth-child(5){
transform:rotate(30deg) translate(100px,0px) scale(1.5,1.5);
}
</style>
</head>
<body>
<ul>
<li>正常的</li>
<li>旋转的</li>
<li>平移的</li>
<li>缩放的</li>
<li>综合的</li>
</ul>
</body>
</html>
无序列表：ul{}，width:800px;height:500px;分别为ul盒子的宽和高，border:1px solid #000;border为边框，1px是边框线的大小，solid为边框线的形态，这是细线状态，还有别的状态可以使用，#000是十六进制颜色，为黑色 margin:0 auto;则是平行居中处理。
由于无序列表前面有·,所以要用list-style:none;去掉前面的点，background-color:red;是盒子颜色，为红色，text-align:center;是平行居中，line-height:50px;是上下居中，50px是盒子的高，为了使盒子里的文字居中。
transform:rotate(30deg);是盒子旋转，30deg为旋转度数，transform:translate(100px,0px);此代码为盒子右移和下移，括号里面是移动像素距离，transform:scale(0.5,0.5);是宽高缩小，或者扩大多少倍。
最后结果如图：
下面展示一些 内联代码片。
<!doctype html>
<html lang="en">
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
width:800px;
height:500px;
margin:0 auto;
}
ul li{
list-style:none;
width:200px;
height:200px;
margin:0 auto;
margin-top:50px
perspective:500px
}
ul li img{
width:200px;
height:200px;
border:1px solid #000;
}
ul li:nth-child(1) img{
transform:rotateZ(45deg);
}
ul li:nth-child(2) img{
transform:rotateX(45deg);
}
ul li:nth-child(2) img{
transform:rotateY(45deg);
}
</style>
</head>
<body>
<ul>
<li>
<img src="1.jpg">
</li>
<li>
<img src="2.jpg">
</li>
<li>
<img src="3.jpg">
</li>
</ul>
</body>
</html>
transform:rotateZ(45deg);transform:rotateX(45deg);transform:rotateY(45deg);分别为延Z、X、Y轴旋转45度。
<!doctype html>
<html lang="en">
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width:600px;
height:700px;
border:1px solid #000;
background-color:skyblue;
margin:100px auto;
perspective:500px
}
div img{
transform-origin:center bottom;
transition:transform 5s;
width:600px;
height:700px;
}
div:hover img{
transform:rotateX(10deg);
}
</style>
</head>
<body>
<div>
<img src="1.jpg" width:310px; height:438px; >
</div>
</body>
</html>
:hover 选择器用于选择鼠标指针浮动在上面的元素，就是鼠标放在图片上，然后图片开始执行transform:rotateX(10deg);延X轴旋转10度，transition:transform 5s;为旋转时间，在5s旋转到底（10deg）。
结合表格，就能创建更加好看的样子。
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>基础练习练习</title>
</head>
<style type="text/css">
img{width:250px;
height:200px;}
*{
margin:0;
padding:0;
}
h1{color:green;}
div{
width:250px;
height:200px;
border:1px solid #000;
margin:100px auto;
perspective:500px
}
img{
transform-origin:center bottom;
transition:transform 2s;
}
div:hover img{
transform:rotateX(10deg);
}
</style>
<body>
<caption>
<h1 align="center">产品中心</h1>
</caption>
<table bgcolor="white" width="1200px" height="400px" align="center" cellspacing="1px">
<tr align="center" bgcolor="white">
<td>
<div>
<img src="images/23.png">
<p>大米色选机</p>
</div>
</td>
<td>
<div>
<img src="images/23.png">
<p>杂粮色选机</p>
</div>
</td>
<td>
<div>
<img src="images/24.png">
<p>玉米色选机</p>
</div>
</td>
<td>
<div>
<img src="images/25.png">
<p>小麦色选机</p>
</div>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>
<div>
<img src="images/26.png">
<p>豆类色选机</p>
</div>
</td>
<td>
<div>
<img src="images/27.png">
<p>塑料色选机</p>
</div>
</td>
<td>
<div>
<img src="images/28.png">
<p>炒货坚果色选机</p>
</div>
</td>
<td>
<div>
<img src="images/29.png">
<p>经济作物色选机</p>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
width:100%;
height:400px;
border:1px solid #000;
background-color:skyblue;
margin-top:100px;
text-align:center;
}
ul li{
list-style:none;
width:150px;
height:200px;
background-color:red;
margin-top:100px;
display:inline-block;
position:relative;
box-shadow:0 0 10px;
}
ul li:nth-child(1){
background-color:red;
transform:rotate(30deg);
}
ul li:nth-child(2){
background-color:red;
transform:rotate(-40deg);
}
ul li:nth-child(3){
background-color:red;
transform:rotate(10deg);
}
ul li:nth-child(4){
background-color:red;
transform:rotate(45deg);
}
ul li img{
width:150px;
height:200px;
border:5px solid #fff;
box-sizing:border-box;
}
ul li:hover{
transform:scale(1.5);
z-index:998;
}
</style>
</head>
<body>
<ul>
<li>
<img src="1.jpg">
</li>
<li>
<img src="2.jpg">
</li>
<li>
<img src="3.jpg">
</li>
<li>
<img src="4.jpg">
</li>
</ul>
</body>
</html>
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。position:relative;相对位置。两者是为了让图片跑到前面去。
display:inline-block;的作用是既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
border:5px solid #fff;设置边框，#fff为灰色，为的是设计后边的阴影。
transform:scale(1.5);变大1.5倍。
本文含有隐藏内容，请 开通VIP 后查看