CSS中动画——Z轴平移，旋转，缩放

news/2024/11/24 14:16:11/

一、Z轴平移

z轴平移，调整元素在z轴的位置，正常情况下调整元素和人眼之间的距离，距离越大，元素离人越近，z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看到效果，必须要设置网页的视距

1:设置视距

—perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px

—设置方式一

html{ perspective: 800px; }

—设置方式二：

—perspective(800px) 谷歌要直接设置在transform里面

选择器{/*perspective(800px) 谷歌要直接设置在transform里面 */

transform: perspective(800px) translateZ(100px); }

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>Document</title><style>/* perspective [pə'spektiv] 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px *//*  html{      perspective: 800px;  } */body {border: 1px solid red;}.box1 {width: 200px;height: 200px;background-color: #bfa;margin: 100px auto;transition: 1s;}body:hover .box1 {/*perspective(800px)  谷歌要直接设置在transform里面 */transform: perspective(800px)  translateZ(100px);}</style></head><body><div class="box1"></div></body>
</html>

二、旋转

1:旋转

通过旋转可以使元素沿着x y或者z旋转指定的角度

—条件：需要提前设置视距

—语法：transform: rotateY() ;

—可选值

rotateX() 沿着x轴旋转

rotateY() 沿着y轴旋转

rotateZ() 沿着z轴旋转

—参数： deg 度 turn 圈

— backface-visibility: ; 设置是否显示元素的背面
可选值：visible 默认值，显示
hidden 不显示

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>Document</title><style>/* 设置当前网页的视距为800px，人眼距离网页的距离，一般不小于600px *//* html{perspective: 800px;} */.box1{width: 200px;height: 200px;background-color: #bfa;margin: 100px auto;transition: 2s;}body:hover .box1{transform: perspective(800px) rotateY(-45deg) ;backface-visibility: hidden;           }</style>
</head>
<body><div class="box1"></div>
</body>
</html>

三、缩放

1:缩放

transform: ; [skeil] 对元素进行缩放的函数

—可选值

scale（）双方向缩放

scaleX() x轴方向缩放

scaleY() y方向缩放

—变形的原点默认值center，可通过transform-origin:;改变原点

参数：数值1 数值2

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>Document</title><style>.box1{width: 100px;height: 100px;background-color: #bfa;margin: 0 auto;margin-top: 100px;transition: 2s;}.box1:hover{/* 变形的原点  默认值center */transform-origin: 0px 0px;transform:scale(2)}/* 需求：设置图片放大效果 */.img-wrapper{width: 200px;height: 200px;border: 1px red solid;overflow: hidden;}.img-wrapper:hover img{transform: scale(1.2);}img{transition: all 1s;}</style>
</head>
<body><div class="box1"></div><div class="img-wrapper"><img src="./1.jpeg" alt=""></div>
</body>
</html>