1. WEB服务器
2. [CSS3]2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。
2.1 二维坐标系
- 2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系。
- 网页中的坐标有异于数学中常见的坐标。
2.2 移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
transform: translate(x, y);
定义2D转换中的移动,沿着 X 和 Y 轴移动元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform: translateX(n);
定义2D转换中的移动,沿着 X 轴移动元素。transform: translateY(n);
定义2D转换中的移动,沿着 Y 轴移动元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translateX(100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- translate 最大的优点在于不会影响其他元素的位置。
- translate 中的百分比单位 % 是相对于自身元素宽高的百分比。
transform: translate(50%, 50%);
- 对行内标签没有效果。
【案例】让盒子实现水平居中和垂直居中
- 【以前的方法】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div><p></p></div>
</body>
</html>
- 【现在的方法】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
p {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
/* p 标签有默认的 margin-top 和 margin-bottom */
margin: 0;
background-color: skyblue;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div><p></p></div>
</body>
</html>
2.3. 旋转rotate
- 语法:
transform: rotate(度数);
。 - roate 里面跟度数,单位是deg。例如:
rotate(45deg);
。 - 角度为正时,顺时针,负时,逆时针。
- 默认旋转的中心点是元素的中心点。
【案例】旋转的兔兔,效果如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
/* 顺时针旋转45° */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
margin-left: -100px;
margin-top: 60px;
/* 过渡写到本身上,谁做动画给谁加。 */
transition: all 1s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="rabbit01.jpg" alt="" />
</body>
</html>
【案例】三角形
- 首先给一个div,div里面需要一个小三角。这里没有再往div里添加一个盒子,而是使用了伪元素::after。
- 伪元素由于是行内元素,行内元素没有大小之说,所以我们需要将其进行转换。恰巧伪元素用到了定位,所以就需要转换了。
- 给伪元素这个小盒子一个右边框,一个下边框,然后旋转45°,就完成了小三角的制作。
- 之后则继续做了一个鼠标放上去做旋转的动画。本身已经有了45°了,在45°的基础上再旋转180°,因此总共旋转了225°。最后再加一个过渡,动画就完成了。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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.6s;
}
/* 鼠标经过 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4. transform-origin
2D转换中心点
- 我们可以设置元素转换的中心点。
- 语法:
transform-origin: x y;
。 - 注意后面的参数 x 和 y 用空格隔开。
- 还可以给 x y 设置像素或者方位名词(top bottom left right center)。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 1. 可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2. 默认的是50% 50% 等价于center center */
/* 3. 可以是px像素 */
transform-origin: 50px 50px;
}
/* 鼠标经过 里面的三角旋转 */
div:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
旋转中心点案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
overflow: hidden;
}
div::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: skyblue;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.5. 2D转换之缩放scale
transform:scale(x, y);
- 注意其中的 x 和 y 用逗号分隔。
- transform:scale(1, 1) 宽度和高度都放大一倍,相当于没有放大。
- transform:scale(2, 2) 宽度和高度都放大了两倍。
- transform:scale(2) 只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2, 2)。
- transform:scale(0.5, 0.5) 缩小。
- scale 缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 50px;
height: 50px;
border: 1px solid pink;
margin: 200px auto;
}
div:hover {
/* 1. 里面写的数字不跟单位 */
transform: scale(3,3);
}
p {
text-align: center;
}
</style>
</head>
<body>
<div></div>
scale不影响其他盒子,此句话不会被移动位置。
</body>
</html>
图片缩放案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
width: 300px;
transition: all .4;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="travel01.jpg" alt=""></a></div>
<div><a href="#"><img src="travel02.jpg" alt=""></a></div>
<div><a href="#"><img src="travel04.jpg" alt=""></a></div>
</body>
</html>
分页按钮缩放案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
float: left;
width: 60px;
height: 60px;
border: 1px solid skyblue;
margin: 10px;
text-align: center;
line-height: 60px;
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>
2.6. 2D转换综合写法
- 同时使用多个转换,其格式为:
transform: translate() rotate() scale()...
等。 - 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
transition: all 1s;
}
div:hover {
transform: translate(150px, 150px) rotate(180deg) scale(1.6);
}
</style>
</head>
<body>
<div></div>
</body>
</html>