2D转换
1、rotate() 旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform: rotate(30deg);"></div><!--值可以为负数-->
</body>
</html>
2、scale() 放大或缩小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background: blue;margin: 100px auto;"></div><!--这是一个参照物-->
<div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform: scale(1.3,1.2);"></div><!--两个值,分别是x,y正数就是放大,负数就是缩小-->
</body>
</html>
3、skew() 倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body><>
<div style="width: 200px;height: 200px;background: red;margin: 100px auto; transform:skew(30deg,20deg);"></div><!--两个值分别为x,y轴,值为负数时,方向就反方向-->
</body>
</html>
4、matrix() matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>
<div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto; transform:matrix(0.866,0.5,-0.5,0.866,0,0);">旋转，缩放，移动（平移）和倾斜功能</div>
<!--这个方式是,把就六种方法集合在一起展示-->
</body>
</html>
5、translate()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>
<div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto; transform: translate(50px,100px);"></div>
<!--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动-->
</body>
</html>
3D转换
1、rotateX() X轴旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>
<div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto;transform:rotateX(120deg);">哈哈哈哈哈哈哈哈哈哈哈哈哈哈好搞笑啊</div>
<!--是围绕本身在一个给定度数X轴旋转的元素-->
</body>
</html>
2、rotate（） Y轴旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 200px;height: 200px;background: blue;margin: 100px auto;">我是参照物</div>
<div style="width: 200px;height: 200px;background: red;border:1px solid black;margin: 100px auto;transform:rotateY(120deg);">哈哈哈哈哈哈哈哈哈哈哈哈哈哈好搞笑啊</div>
<!--是围绕本身在一个给定度数Y轴旋转的元素-->
</body>
</html>
过渡
1、transition 效果的持续时间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
} div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
</style>
</head>
<body>
</body>
</html>
.guo{
width:100px;
height:100px;
background:blue;
transition:width 2s;
/*transition: property duration timing-function delay;*/
/*transition-property 规定设置过渡效果的 CSS 属性的名称。*/
/*transition-duration 规定完成过渡效果需要多少秒。*/
/*transition-delay 定义过渡效果何时开始。*/
/*transition-timing-function 规定速度效果的速度曲线。*/
}
.guo:hover{
width:300px;
}
</style>
<body>
<div class="xuanzhuan"></div>
<p class="sand"></p>
<!-- 3d镶嵌 -->
<div id="div1">
<div id="div2">HELLO
<div id="div3">YELLOW</div>
</div>
</div>
<!-- 过渡 -->
