这是一个小案例，展示了transform在网页上常见的几个效果。

比如translate位置的移动，scale缩放，skew倾斜等。

当然还应用了box-shadow投影，linear-gradient线性渐变等效果。

这些知识点在css教程里面都有详细的介绍，不懂可以翻翻看。

点击查看效果

下载源文件

链接: https://pan.baidu.com/s/1fNqhFs6NPx2nQ1ihMuhgEw 密码: msa9

一、html结构

<div id="wrap" class="clearfix">
    <div class="box">
    	<div class="pic-box"><a href="#"><img src="images/1.jpg" /></a></div>
        <div class="title">
       	  <p><a href="#">CodeTank</a></p>
          <p class="info"><a href="#">全世界首个Javascript程序员的在线编程对战游戏</a></p>
        </div>
    </div>
    ...
    <div class="box b1 light"></div>
    ...
</div>

二、css样式

*{
	box-sizing:border-box;}
body,p{
	margin:0;
	}
body{
	font:1em "microsoft Yahei";
	color:#333;
	background-color:#eee;}
img{
	border:none;
	vertical-align:middle;}
a{
	color:#666;
	text-decoration:none;
	transition:0.2s;}
a:hover{
	color:#333;}
.clearfix:after{
	content:"";
	display:block;
	clear:both;}
h1{
	text-align:center;
	font-size:2.5em;}
#wrap{
	width:95%;
	min-width:1000px;
	max-width:1920px;
	margin:50px auto 0;}
.box{
	width:23.5%;
	float:left;
	margin-right:2%;
	margin-bottom:2%;
	background-color:#fff;
	transform:translateY(0);
	transition:0.3s;
	overflow:hidden;
	cursor:pointer;
	}
.box:nth-of-type(4n){
	margin-right:0;}
.box:hover{
	transform:translateY(-5px); /*变形：移动y坐标值。负值往上。*/
	box-shadow:0 38px 20px -30px rgba(0,0,0,.2);}
.box img{
	transform:scale(1); /*变形：缩放，1表示100%，0.5表示原来大小的50%，2表示200%。*/
	width:100%;
	transition:0.3s;}
.box img:hover{
	transform:scale(1.05);}
.pic-box{
	overflow:hidden;}
.title{
	padding:20px 15px;}
.box .info{
	margin-top:10px;
	}
.box .info a{
	display:block; /*为block对象设置强制不换行。省略号的颜色才能和鼠标经过的颜色变化一致。*/
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;}
.b1{background:#70c3ff url(images/4.png) no-repeat center;}
.b2{background:#fd6a7f url(images/5.png) no-repeat center;background-size:65%;}
.b3{background:#7f8ea0 url(images/6.png) no-repeat center;background-size:30%;}
.b4{background:#89d04f url(images/7.png) no-repeat center;background-size:30%;}

.light{
	height:288px;}
.light:after{
	content:"";
	display:block;
	width:100%;
	height:100%;
	background:linear-gradient(to right,transparent 20%,rgba(255,255,255,.3) 30%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.3) 70%,transparent 80%); /*线性渐变，必须是background-image的属性值。*/
	transform:skew(-25deg) translateX(-100%); /*同时有两个以上的变形，空格隔开。后定义的先执行。*/
	}
.light:hover:after{
	transform:skew(-25deg) translateX(100%);
	transition:.5s; /*鼠标经过，移上去有动画，移开没有动画。*/
	}