2D变换
-
- rotate()旋转函数 取值函数
- deg 度数
- transform-origin: 旋转的基点(left,top,等等)
-
- skewX() 横轴斜切
- skewY() 纵轴斜切
scaleX() 横轴缩放
scaleY() 纵轴缩放
-
- 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>
效果图如下:
旋转.gif
斜切
<!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>
效果图如下
斜切.gif
放到或者缩小
<!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>
效果
放大或者缩小.gif
斜线导航效果
<!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>
斜线导航
斜线导航.gif
位移就是位置移动
<!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>
效果图:
位移.gif
这里特别注意的是transform执行顺序问题，后写的先执行
<!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>
效果图
transform执行顺序.gif
- 从上图明显可以看出来BOX2要比BOX1走的更远
- 因为BOX2先执行的就是scale缩小然后在执行的移动。移动的距离没有变化
- 而BOX1先执行的是移动在执行的缩小，这样移动的距离也在缩小。所以发生了变化
