2D 变换
transform
- rotate()旋转函数 取值函数
- deg 度数
- transform-origin: 旋转的基点(left,top,等等)
skew()倾斜函数 取值函数
- skewX() 横轴斜切
- skewY() 纵轴斜切
scale() 缩放函数取值，正数，负数和小数
scaleX() 横轴缩放
scaleY() 纵轴缩放
translate()位移函数
- translateX() 横轴移动
- translateY() 纵轴移动
旋转
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>CSS3旋转</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.box1 {
width: 100px;
height: 100px;
margin: 100px auto;
background: red;
transition: 3s linear;
-webkit-transform-origin: left top;
}
.box1:hover {
-webkit-transform: rotate(720deg);
}
</style>
<body>
<div class="box1"></div>
</body>
</html>斜切
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
transtion: 3s linear;
}
.box:hover {
-webkit-transform: skew(10deg, 10deg);
}
</style>
<body>
<div class="box"></div>
</body>
</html>放到或者缩小
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 200px;
height: 200px;
background: red;
margin: 100px auto;
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
transition: 3s;
}
.box:hover img {
-webkit-transform: scale(1.5);
}
</style>
<body>
<div class="box"></div>
</body>
</html>斜线导航效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
}
li {
float: left;
}
a {
text-decoration: none;
color: white;
}
#ul1 {
width: 500px;
height: 40px;
background: black;
-webkit-transform: skew(45deg);
margin: 50px auto;
}
#ul1 li {
border-right: 2px dashed white;
line-height: 40px;
font-size: 18px;
width: 98px;
height: 40px;
text-align: center;
}
#ul1 li a {
-webkit-transform: skew(-45deg);
display: block;
}
</style>
<body>
<ul id="ul1">
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">导航四</a></li>
<li><a href="#">导航五</a></li>
</ul>
</body>
</html>位移就是位置移动
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
}
li {
float: left;
}
a {
text-decoration: none;
color: white;
}
#ul1 {
width: 500px;
height: 40px;
background: black;
-webkit-transform: skew(45deg);
margin: 50px auto;
transition: 2s;
}
#ul1 li {
border-right: 2px dashed white;
line-height: 40px;
font-size: 18px;
width: 98px;
height: 40px;
text-align: center;
}
#ul1 li a {
-webkit-transform: skew(-45deg);
display: block;
}
#ul1:hover {
-webkit-transform: translate(100px, 0px);
}
</style>
<body>
<ul id="ul1">
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">导航四</a></li>
<li><a href="#">导航五</a></li>
</ul>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
div:not(#wrap) {
width: 100px;
height: 100px;
background: red;
transition: 3s;
}
.box1 {
transition: 3s;
}
.box2 {
transition: 3s 1s;
}
#wrap:hover .box1 {
-webkit-transform: scale(0.5) translateX(600px);
}
#wrap:hover .box2 {
-webkit-transform: translateX(600px) scale(0.5);
}
</style>
<body>
<div id="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
</body>
</html>- 从上图明显可以看出来 BOX2 要比 BOX1 走的更远
- 因为 BOX2 先执行的就是 scale 缩小然后在执行的移动。移动的距离没有变化
- 而 BOX1 先执行的是移动在执行的缩小，这样移动的距离也在缩小。所以发生了变化
