css代码如下
body{
padding: 100px;
}
/*初始设置所有盒子大小及颜色*/
div{
width: 100px;
height: 100px;
background: #0f0;
margin-top: 30px;
/*设置过渡时间及效果*/
transition: all 5s;
}
.a:active{
/*旋转 角度为360度*/
transform: rotate(360deg);
}
.b:active{
/*放大为原来的2倍 缩小为0-1倍*/
transform: scale(2);
}
.c:active{
/*倾斜为原来的45度 可为正负*/
transform: skew(45deg);
}
.d:active{
/*平移 可设两个值 中间用 "," 分开 第一个值为x 第二个值为Y轴*/
transform: translate(300px);
}
html代码如下：
<body>
<div class="a">旋转</div>
<div class="b">放大</div>
<div class="c">倾斜</div>
<div class="d">平移</div>
</body>
