一,平移动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变换效果</title>
<style>
/**
* transform主要用来实现变换效果
1--平移动画 translate
*/
.box{
width: 300px;
height: 300px;
border: 1px solid forestgreen;
/* 变换 translate(100px,100px) ;括号里面是是(x,y)一个div默认的左上点就是(0,0)然后相对(0,0)进行平移* /
transform:translate(100px,100px) ;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二缩放动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变换效果</title>
<style>
/**
* transform主要用来实现变换效果
1--平移动画 translate
*/
.box{
width: 300px;
height: 300px;
border: 1px solid forestgreen;
/* x ,y 都扩大一倍 */
transform:scale(2