CSS3 2D转换
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果
转换可以理解为变形：缩放、旋转、移动
移动
2D移动数2D这个样哑巴中的一种功能，可以改变元素在页面中的位置，类似于定位
语法是这样：
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);div{width: 200px;height: 200px;background-color: pink;transform: translate(100px,100px);
}translate最大的优点是不会影响到其他元素的位置
translate的百分比单位是相对于自身元素的translate
我们可以用这个特点实现子盒子在父盒子的中央位置
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天菜</title><style>div{position: relative;width: 500px;height: 500px;background-color: pink;}p{position: absolute;top:50%;left: 50%;;width: 200px;height: 200px;background-color:aqua;transform: translate(-50%,-50%);}</style>
</head>
<body><div><p></p></div>
</body>
</html>对行内标签是没有效果的
旋转
旋转是指元素在二维平面内顺时针或者逆时针旋转
这是基本的语法：
transform:rotate(度数)rotate里面跟度数，单位是deg，比如rotate(45deg)
角度为正的时候，顺时针
负的时候是逆时针
默认的旋转的中心点是元素的中心点
<!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: 300px;height: 300px; }div img{width: 100%;height: 100%;border-radius: 50px;}div:hover img{transform: rotate(360deg);transition: all 0.7s;}</style>
</head>
<body><div><img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt=""></div>
</body>
</html>真是盖了帽了
旋转可以给我们做出三角形
<!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{position: relative;width: 249px;height: 35px;border: 1px solid red;}div::after{content: "";position: absolute;top: 0;right: 0;width: 15px;height: 15px;border-right: 1px solid skyblue;border-bottom: 1px solid seagreen;transform: rotate(45deg);}</style>
</head>
<body><div></div>
</body>
</html>
三角和旋转配合起来就可以有动画的效果
我们可以设置我们元素转换的中心点：transform-origin
transform-origin: x y;<!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{overflow: hidden;width: 200px;height: 200px;border: 1px solid palegreen;margin: 100px auto;}div::before{content: "喜欢";display: block;width: 100%;height: 100%;background-color: hotpink;transform: rotate(180deg);transform-origin: left bottom;transition: all 0.4s;}div:hover::before{transform: rotate(0deg);}</style>
</head>
<body><div></div>
</body>
</html>旋转效果可爱捏
缩放
缩放的语法：
transform: scale(x,y);里面的数字如果不跟单位的话就是倍数的意思
<!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: pink;margin: 100px auto;}div:hover{transform: scale(2,2);}</style>
</head>
<body><div></div>
</body>
</html>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>li{float: left;width: 30px;height: 30px;border: 1px solid pink;margin: 10px;text-align: center;line-height: 30px;list-style: none;border-radius: 7px;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转换有综合的写法，是同时使用多个转换，空格隔开即可
顺序会影响转换的效果
当我们同时拥有位移和其他属性的时候，记得要将位移放到最前面
CSS3 动画
动画是CSS3中具有颠覆性的特征之一，可以通过多个结点控制一个或一组动画，常用来实现复杂的动画效果
动画可以实现更多的变化，控制，连续自动播放等效果
先定义再调用
@keyframes 动画名称{0%{width:100px;}100%{width:200px;}
}这是定义动画
这是使用动画：
div{height: 300px;width: 300px;border-color: aqua;animation-name: move;animation-duration: 5s;
}动画可以实现很多效果
动画可以改变任意多的样式任意多的次数
可以用百分比规定变化发生的时间，或者用关键词from to，等同于0和100
<!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>@keyframes move{0%{transform: translate(0px);}25%{transform: translate(1000px,0);}50%{transform: translate(1000px,500px);}75%{transform: translate(0,500px); }100%{transform: translate(0px);}}div img{height: 200px;width: 300px;background-color: aqua;animation-name: move;animation-duration: 3s;}</style>
</head>
<body><div><img src="./pp.jpg" alt=""></div>
</body>
</html>还挺炫酷的
这是各种可以设置的属性
动画结束之后的状态是backwards
动画简写就是animation：动画名称，持续时间，运动曲线，何时开始，播放次数，是否反方向，动画起始或者结束的状态
我用动画做了537的发光眼：
<!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>.map{position: relative;width: 550px;height: 550px;background-image: url(./537.jpg);}.city{position: absolute;top: 141px;right: 105px;}.dotted{width: 8px;height: 8px;background-color: rgb(0, 255, 76);border-radius: 50%;}.city div[class^="pulse"]{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 8px;height: 8px;box-shadow: 0 0 12px #5dfd00;border-radius: 50%;animation: pulse 1.2s linear infinite;}.map .city .pulse2{animation-delay: 0.4s;}.map .city .pulse3{animation-delay: 0.8s;}@keyframes pulse{0%{}70%{width: 40px;height: 40px;opacity: 1;}100%{width: 70px;height: 70px;opacity: 0;}}
</style>
</head>
<body><div class="map"><div class="city"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></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"><title>Document</title><style>div{width: 0;height: 30px;background-color: pink;animation: w 4s steps(10) forwards;}@keyframes w{0%{width: 0;}100%{width: 200px;}}</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"><title>Document</title><style>div{overflow: hidden;width: 0;height: 30px;white-space: nowrap;background-color: pink;animation: w 4s steps(11) forwards;}@keyframes w{0%{width: 0;}100%{width: 180px;}}</style>
</head>
<body><div>西安邮电你是杀不死我的</div>
</body>
</html>嘻嘻
我是不会放过你们的
给我等着吧
这个肉像是有蛆爬过去一样
西安邮电还在输出
而且我还吃了大半碗才发现这件事
案例：奔跑的蓝色米老鼠
CSS3 3D转换
我们的生活环境是3D的，照片就是3D物品在2D平面中呈现的例子
它近大远小
且物体后面遮挡不可见
我们3D转换所用到的三维坐标系是立体空间，是由三个轴共同组成的
3D位移
这是语法：
<!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: pink;/* transform: translateX(100px) translateY(100px) translateZ(100px); */transform: translate3d(100px,100px,100px);}</style>
</head>
<body><div></div>
</body>
</html>而xyz都是不能省略的，如果没有的话就写0
要在2D平面产生近大远小视觉立体的效果只是二维的
透视
如果想要产生3D效果的话需要透视（3D投影在2D平面）
模拟人类的视觉位置，可以认为是只安排一只眼睛去看
透视我们也称之为视距，视距就是人的眼睛到屏幕的距离
距离视觉点近的电脑平面成像越大，越远的越小
透视的单位是像素
透视是写在被观察元素的父盒子上面的
d是视距，是一个距离人的眼睛到屏幕的距离
z是z轴，物体距离屏幕的距离，越大我们看到的物体就越大
3D旋转
3D旋转可以让我们按照x轴y轴z轴或者自定义轴旋转
语法：
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(x,y,z,deg);这前面三个分别是沿着x，y，z正方向旋转45deg，第四个是沿着自定义轴旋转，deg是角度
对于元素的旋转方向的判断，基于左手准则
左手手拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的方向
<!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>body{/* 透视写到被观察的元素的父盒子上面 */perspective: 500px;}div{width: 200px;height: 300px;background-color: pink;transform: translate3d(100px,100px,100px);transform: translateZ(-300px);transition: all 0.5s;margin: 0 auto;}div img{width: 100%;height: 100%;}div:hover{transform: rotateX(180deg);}</style>
</head>
<body><div><img src="./王振1.jpg" alt=""></div>
</body>
</html>
这是沿着不同轴转动能实现的效果
3D呈现
3D呈现是transform-style
它控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3d立体空间，默认的
transform-style:preserve-3d，子元素开启立体空间
代码写给父级，影响的是子盒子
<!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>body{perspective: 500px;}.box{position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 1.1s;transform-style: preserve-3d;}.box:hover{transform: rotateY(60deg);}.box div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: aquamarine;}.box div:last-child{background-color: purple;transform: rotateX(60deg);}</style>
</head>
<body><div class="box"><div></div><div></div></div>
</body>
</html>这就可以实现3D的立体效果
两面旋转盒
我们首先需要搭建html结构
box父盒子里面包含前后两个子盒子
box是反转的盒子，front是前面的盒子，back是后面的盒子
我们反转的是盒子
<!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>body{perspective: 350px;}.box{position: relative;width: 250px;height: 300px;margin: 100px auto;/* 让背面的盒子保存立体空间 */transition: all 3s;transform-style: preserve-3d;backface-visibility: hidden;}.front,.back{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;}.front{z-index: 1;}.back{transform: rotateY(180deg);}.box:hover{transform: rotateY(180deg);}</style>
</head>
<body><div class="box"><img src="./见见的狗.jpg" alt="" class="front"><img src="./王振2.jpg" alt="" class="back"></div>
</body>
</html>这是我们实现的代码
旋转木马案例
<!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>body{perspective: 800px;}@keyframes rotate{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}}section{position: relative;width: 400px;height: 400px;margin: 100px auto;transform-style: preserve-3d;animation: rotate 10s linear infinite;background: url(./王振1.jpg);background-size: cover;}section:hover{/* 鼠标放置暂停 */animation-play-state: paused;}section div{position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: url(./见见的狗.jpg);}section div:nth-child(1){transform: translateZ(500px);}section div:nth-child(2){transform: rotateY(60deg) translateZ(500px);}section div:nth-child(3){transform: rotateY(120deg) translateZ(500px);}section div:nth-child(4){transform: rotateY(180deg) translateZ(500px);}section div:nth-child(5){transform: rotateY(240deg) translateZ(500px);}section div:nth-child(6){transform: rotateY(300deg) translateZ(500px);}</style>
</head>
<body><section><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body>
</html>当然是要先旋转再移动啦
说实话这个看久了头都晕了
浏览器私有前缀
浏览器有私有前缀，是为了兼容老版本的写法，比较新版本的浏览器都无需添加
这就是主要的属性
看完十日终焉的我：