本文详细介绍了CSS3的2D转换，包括移动、旋转和缩放，通过多个实例展示了其在网页设计中的应用。接着深入讲解了CSS3动画的使用，包括基本操作、序列、常用属性及多个精彩案例。最后探讨了3D转换，如3D移动、透视和旋转，以及如何实现3D导航栏和旋转木马效果。
目录
一、CSS3 2D转换
1.1 移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法：
重点：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D转换----移动translate</title>
<style>
/* 移动的方式： 定位 、 盒子的外边距 、 2d转换移动 */
/* 移动的语法：x\y就是在xy轴上移动的距离
transform: translate(x,y);
transform: translateX(数值/百分比) 只移动x轴 也可以 transform: translate(x,0)
transform: translateY(数值/百分比) 只移动Y轴 也可以 transform: translate(0,y); */
/* translate移动了不会影响其他盒子，且对行内元素没有效果 */
* {
margin: 0;
padding: 0
}
div {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
transform: translateX(200px);
margin: 20px 0;
/* transform: translateY(200px); */
}
p {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
background-color: purple;
/* 移动的单位可以是px，也可以是% */
/* transform: translate(-50px,-50px); */
/* 这里的百分比是以自身为参考的 */
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>效果：
1.2 旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法
重点
案例1——鼠标经过图片有旋转的效果
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D转换----旋转rotate之鼠标有经过旋转的效果</title>
<style>
/* 正值就是顺时针旋转，负值是逆时针旋转 */
/* 配合过渡使用 */
img {
transition: all 0.5s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="images/arr.png" alt="">
</body>
</html>效果：
案例2——用2个边框来做出三角图标
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 2D转换----旋转rotate之用2个边框来做出三角图标</title>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
margin: 0 auto;
}
div::after {
position: absolute;
top: 12px;
right: 10px;
content: '';
width: 7px;
height: 7px;
/* 给伪元素盒子设置两个边框，然后旋转45度即可 */
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
/* 加过渡，让鼠标经过时，旋转得没那么生硬 */
transition: all 0.3s;
transform-origin: 70% 75%;
}
/* 可以设置鼠标经过div盒子时，里面的三角旋转 */
div:hover::after {
/* 两种都行 */
/* 45+180 */
/* transform: rotate(225deg); */
/* 45-180 */
transform: rotate(-135deg);
/* 改变旋转中心点*/
transform-origin: 70% 75%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果：
案例3——改变中心点
代码：transform-origin: left bottom;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D转换----旋转rotate之改变旋转中心点:左下角</title>
<style>
div {
/* 隐藏溢出的部分 */
overflow: hidden;
width: 200px;
height: 200px;
background-color: pink;
margin: 20px;
/* 让每一个div在同一行中显示 */
float: left;
}
div::after {
/* 伪元素是行内元素，要转换为块才能设置高度宽度 */
display: block;
/* 伪元素必须要有content */
content: '美女来了';
width: 100%;
height: 100%;
background-color: hotpink;
/* 旋转90度 */
transform: rotate(90deg);
/* 改变旋转中心为左下 */
/* 改变旋转中心点：默认的是50% 50% 等价于center center 也可以是像素为单位,注意中间用空格隔开*/
transform-origin: left bottom;
/* 加过渡 */
transition: all 0.5s;
}
/* 鼠标经过div时，里面的伪元素旋转上来 */
div:hover::after {
/* 单位不能省略 */
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>效果：
1.3 缩放 scale
缩放，顾名思义，可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。
语法：
重点：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D转换----缩放scale</title>
<style>
/* 1 有两种写法: 两个参数 一个参数(代表两个参数一样) */
/* 2 参数为1 1 代表的是 宽度和高度缩放为原来的一倍,相当于不变 */
/* 3 参数＞1 为放大 ,＜1为缩小 */
/* 4 scale的优势在于: 放大和缩小的时候不会影响其他盒子,并且以中心点来放大缩小(向四周) */
/* 5 参数可以为小数 */
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 30px auto;
transition: all 0.3s;
}
div:hover {
/* 一个参数 */
transform: scale(1.1);
}
</style>
</head>
<body>
<div></div>
<p>123</p>
</body>
</html>效果：
案例1——鼠标经过图片时图片放大
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D转换----缩放scale-图片案例</title>
<style>
div {
/* 让每一个div在同一行显示 */
float: left;
/* 隐藏溢出div部分的图片(给img设置放大效果时,图片的宽度和高度没有改变,只是看起来内容变大) */
overflow: hidden;
width: 200px;
height: 150px;
margin: 20px;
}
img {
width: 200px;
height: 150px;
/* 谁做过渡给谁加过渡 */
transition: all .2s;
}
div a img:hover {
/* 加放大 */
transform: scale(1.1);
}
</style>
</head>
<body>
<div><a href="#"><img src="images/airdots.jpg" alt=""></a></div>
<div><a href="#"><img src="images/airdots.jpg" alt=""></a></div>
<div><a href="#"><img src="images/airdots.jpg" alt=""></a></div>
</body>
</html>效果：
案例2——分页按钮
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D转换----缩放scale-分页按钮案例</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
margin: 200px;
}
ul li {
float: left;
width: 20px;
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
