2D转换之旋转 rotate
2D转换指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
1. 语法:
transform:rotate(度数)
2. 重点:
1. rotate里面跟度数,单位是deg 比如 rotate(45deg)。
2. 角度为正时,顺时针,负时,为逆时针。
3. 默认旋转的中心是元素的中心点。
命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img{
width: 350px;
/*顺时针旋转45度%*/
/*transform: rotate(45deg);*/
border-radius: 50%;
border: 5px solid palegreen;
/*过渡写到本身上,谁做动画给谁加*/
transition: all 0.3s;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="images/u=1474042214,3919453043&fm=26&gp=0.jpg">
</body>
</html>
网页显示图:
2D转换之旋转 rotate (三角形案例):
命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after{
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.3s;
}
/* 鼠标经过div 里面的三角旋转*/
div:hover::after{
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
网页显示图:
2D转换中心点transform-origin
我们可以设置元素转换的中心点。
1. 语法:
transform-origin: x y;
2. 重点:
1. 注意后面的参数 x和 y 用空格隔开
2. x y 默认转换的中心点是元素的中心点(50% 50%)
3. 还可以给x y设置像素或者方位名词(top bottom left right center)
命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid palegreen;
margin: 10px;
float: left;
}
div::before {
content: "马腾";
display: block;
width: 100%;
height: 100%;
background-color: palegreen;
transform:rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
/* 鼠标经过div里面的before 复原 */
div:hover::before{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
网页显示图:
做一个旋转中心点案例:
命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid palegreen;
margin: 10px;
float: left;
}
div::before {
content: "马腾";
display: block;
width: 100%;
height: 100%;
background-color: palegreen;
transform:rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
/* 鼠标经过div里面的before 复原 */
div:hover::before{
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
网页显示图:
2D 转换之缩放 scale
缩放,顾名思义,可以放大和缩小,只要给元素添加上了这个属性就能控制它放大还是缩小。
1. 语法:
transform:scale(x,y);
2. 注意:
注意其中的x和y用逗号分隔。
transform:scale(1,1) : 宽和高都放大一倍,相当于没有放大。
transform:scale(2,2) : 只写一个参数,第一个参数则和第一个参数一样, 相当于scale(2,2)
transform: sclae(2) : 缩放 。
scale 缩放最大的优势 : 可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。
图片放大命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
overflow: hidden;
float: left;
margin: 20px;
}
div img{
transition: all 0.4s;
}
div img:hover{
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="images/p_small_008.jpg" alt=""></a></div>
<div><a href="#"><img src="images/p_small_008.jpg" alt=""></a></div>
<div><a href="#"><img src="images/p_small_008.jpg" alt=""></a></div>
</body>
</html>
图片放大显示:
图片缩小命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: palegreen;
margin: 100px auto;
/*改变缩放中心点*/
/* transform-origin: left bottom; */
}
div:hover{
/*1. 里面写的数字不跟单位 就是倍数的意思 1就是1倍 2就是2倍*/
/* transform: scale(x,y);*/
/* transform: scale(2,2); */
/*2.修改了宽度为原来的2倍 高度 不变*/
/* transform: scale(2,1); */
/*3. 等比例缩放 同时修改宽度和高度,我们有简单的写法 以下是 宽度修改了2倍,
高度默认和第一个一样*/
/* transform: scale(2); */
/* 4. 我们可以进行缩小 小于1就是缩放 */
/* transform: scale(0.5,0.5); */
transform: scale(0.5);
/* 5. scale 的优势之处: 不会影响其他盒子 而且可以设置缩放的中心点 */
/* width: 300px;
height: 300px; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
图片缩小显示图:
再让我们做一个分页按钮的案例
命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li{
margin-right: 10px;
display: block;
float: left;
width: 30px;
height: 30px;
border: 1px solid palegreen;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.4s;
}
li:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
网页显示图:
2D转换综合写法
注意:
1.同时使用多个转换,其格式为: transform:translate()rotate()scale() ...等,
2. 其顺序会影响转换的效果。 (先旋转会改变坐标轴方向)
3. 当我们同时有位移和其他属性的时候,记得要将位移放到最前。
命令演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: palegreen;
transition: all 0.5s;
}
div:hover{
/* transform: translate(150px,150px) rotate(180deg); */
/* 我们同时有位移和其他属性,我们需要把位移放到最前面 */
transform: translate(150px,150px) rotate(180deg) scale(1.2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
网页显示图: