转换
移动
/* transform: translate(100px, 200px); */
transform: translateX(100px);
transform: translateY(100px);
/*一个意思*/如果后面跟百分数的意思是移动盒子自身x/y方向长度的百分比，可以用作子绝父相控制盒子水平居中垂直居中
translate里的xy值是相对于自身的初始位置的位移（而不是相对前一次位置的位移）
使用这种方式移动盒子的优点是不影响其他盒子（不占用位置的相对定位）
行内元素不适用translate
旋转
旋转的风扇
通过旋转制作下拉标识：
<!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>
.qqq {
width: 200px;
height: 30px;
background-color: aqua;
position: relative;
}
.www {
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="qqq">
<div class="www"></div>
</div>
</body>
</html>
改变旋转中心点
transform-origin:x y;x和y用空格隔开，xy默认转换中心点的元素是50% 50%
也可以给xy设置方位名词（left bottom top right center）
一个旋转小动画的demo
<!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 {
margin-top: 300px;
text-align: center;
}
.iii {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
/* background-color: aqua; */
margin: 100px auto;
}
.iii::before {
display: block;
content: 'epi';
width: 100%;
height: 100%;
background-color: blueviolet;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all .4s;
}
.iii:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="iii"></div>
</body>
</html>
缩放
transform:scale(x,y);xy之间有逗号
transform:scale(1,1);：宽高都放大一倍，等于没有放大
transform:scale(2,2);都放大两倍
transform:scale(2);都放大两倍
transform:scale(0.5,0.5);都缩小二分之一
最大的优点：可以设置转换最新缩放，默认以中心点缩放，且不影响其他盒子
数字不跟单位，负数会反向再放缩
优势：之前学的修改宽高是以top边为依据向下进行缩放
scale()可以自己设置缩放中心缩放，更适合一些自然的动画效果，不会影响其他盒子
这种动画效果也是有简写的
transform：translate() rotate（）scale()...;简写的顺序是会影响动画的效果的（如果写了translation的话）当我们同时具有位移和其他属性的时候，一定要先写位移
动画
动画的实现方式类似于函数的调用，需要你先写一个动画效果，再让目标对象调用这个函数，就可以实现动画效果
实现一加载页面，就出现的动画效果
<!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: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 400px;
height: 400px;
background-color: aqua;
animation-name: move;
animation-duration: 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>from to可以实现和0%、100%一样的效果
@keyframes move {
from{
transform: translateX(0px);
}
to {
transform: translateX(1000px);
}
}
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 {
margin: 20px 20px;
width: 100px;
height: 100px;
background-color: aqua;
animation-name: move;
animation-duration: 10s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>实现一个小方块10s内环绕了一周的效果
动画的常用属性
鼠标经过盒子，动画效果暂停，拿开又恢复
<!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);
}
100% {
transform: translate(1000px, 500px);
}
}
div {
margin: 20px 20px;
width: 100px;
height: 100px;
background-color: aqua;
animation-name: move;
animation-duration: 10s;
animation-fill-mode: forwards;
}
div:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>简写：
vscode里提供了当你忘记简写顺序的提示：
可以按这个写
animation: name duration timing-function delay iteration-count direction fill-mode;前面两个属性是必写属性（名字和时间）
速度曲线值：
linear匀速
ease默认，低速开始加快再变慢
ease-in以低速开始
ease-out以低速结束
ease-in-out以低速开始和结束
steps指定了时间函数的间隔数量（步长）
steps可以决定分几步来完成动画
一个眼泛粉光的呆猫
<!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>
.momo {
position: relative;
width: 1200px;
height: 1200px;
background: url(/初识css/微信图片_20241125113021.jpg) no-repeat;
margin: 0 auto;
}
.eye {
position: absolute;
top: 430px;
left: 360px;
color: cyan;
}
.dotted {
width: 10px;
height: 10px;
background-color: #ff9cc2;
border-radius: 50%;
}
.eye2 {
position: absolute;
top: 435px;
left: 500px;
}
.eye div[class^="pulse"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
box-shadow: 0 0 12px #ff9cc2;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
.eye div.pulse2 {
animation-delay: 0.4s;
}
.eye div.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="momo">
<div class="eye">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="eye eye2">
<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>
body {
position: relative;
background-color: #ccc;
}
.bear {
z-index: 3;
position: absolute;
top: 200px;
width: 200px;
height: 100px;
background: url(bear.png) no-repeat;
animation: bear 1s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
.bg {
width: 100%;
position: relative;
height: 336px;
overflow: hidden;
}
.bg1,
.bg2 {
width: 100%;
position: absolute;
height: 336px;
animation: bg 2s steps(8) infinite;
}
.bg1 {
z-index: 2;
background: url(bg1.png) no-repeat;
}
.bg2 {
z-index: 1;
background: url(bg2.png) no-repeat;
}
@keyframes bg {
0% {
background-position: 0 0;
}
100% {
background-position: -1240px 0;
}
}
</style>
</head>
<body>
<div class="bear"></div>
<div class="bg">
<div class="bg2"></div>
<div class="bg1"></div>
</div>
</body>
</html>
3d转换
translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在y轴上移动
translform:translateZ(100px):仅仅是在z轴上移动
translform:translate3d(x,y,z):xyz分别指要移动的轴的方向和距离z一般用像素控制，xy可以用百分比
3d转换常和透视结合
透视
透视（视距）的单位是像素
透视写到被观察元素的父盒子里面
也就是现实里一个东西在眼睛里的视觉效果在css里是靠teanslformZ+perspective结合形成的
z实现了真正的移动，透视实现了视觉的移动
3d旋转
translform:rotate(45deg):沿着x轴正方向旋转45度
translform:rotate(45deg):沿着y轴正方向旋转45度
translform:rotate(45deg):沿着z轴正方向旋转45度
translform:rotate(x,y,z。deg):沿着自定义的轴旋转(了解)实现沿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;
}
.toushi {
width: 200px;
height: 200px;
background-color: aquamarine;
transition: all 1s;
}
.toushi:hover{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<div class="toushi">杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀</div>
</body>
</html>沿x轴，垂直屏幕向里是正方向，垂直屏幕向外是反方向
沿y轴旋转，正转是垂直屏幕向里，反转是向外
沿z轴，正转顺时针，反转逆时针
（分别是xyz）
3d呈现
保证盒子套盒子的时候，仍然可以实现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:hover {
transform: rotateY(60deg);
}
.box {
transform-style: preserve-3d;
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: aqua;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<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">
<title>Document</title>
<style> body {
perspective: 1000px;
}
section {
position: relative;
width: 216px;
height: 216px;
margin: 100px auto;
transform-style: preserve-3d;
animation: move 10s linear infinite;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../初识css/微信图片_20241125113021.jpg) no-repeat;
background-size: contain;
}
@keyframes move {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section div:nth-child(1) {
transform: translateZ(300px);
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
transform: rotateY(-60deg) translateZ(300px);
}
section div:nth-child(4) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(5) {
transform: rotateY(-120deg) translateZ(300px);
}
section div:nth-child(6) {
transform: rotateY(-180deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
浏览器私有前缀
-moz-,firefox浏览器的私有属性
-ms-,ie浏览器的私有属性
-webkit-代表safari、chrome私有属性
-o-代表oprea私有属性
