B2

编程入门行业动态更新时间:2024-10-09 19:23:28

B2

transform属性

2D

translate平移
语法：
—transform：translate(xpx,ypx);

<!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>.d1{width: 100px;height: 100px;background-color: aquamarine;}.d1:hover{transform: translate(50px,50px);}</style>
</head>
<body><div class="d1"></div>
</body>
</html>

效果如下（各网页版本不同显示会有差异）

-hover

scale缩放
语法：
transform:scale(num);
其中num>0为放大;num<0为缩小

<!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>.d1{width: 100px;height: 100px;border: 1px solid aquamarine;}.d2{width: 100px;height: 100px;background-color: aquamarine;}.d2:hover{transform: scale(0.5);}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>

效果如下（各网页版本不同显示会有差异）

-hover

rotate旋转
语法：
transform:rotate( ** deg);
deg为角度的单位；其中 ** >0为顺时针，* *<0为逆时针。

<!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>.d1{margin: 100px;width: 100px;height: 100px;border: 1px solid aquamarine;}.d2{width: 100px;height: 100px;background-color: aquamarine;}.d2:hover{transform:rotate(30deg);}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>

效果如下（各网页版本不同显示会有差异）

-hover

skew倾斜
语法：
transform:skew(xdeg,ydeg);
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>.d1{margin: 100px;width: 100px;height: 100px;border: 1px solid aquamarine;}.d2{width: 100px;height: 100px;background-color: aquamarine;}.d2:hover{transform:skew(30deg,-15deg);}</style>
</head>
<body><div class="d1"><div class="d2"></div></div>
</body>
</html>

效果如下（各网页版本不同显示会有差异）

-hover

3D

建立3D环境
transform-style:preserve-3d;
perspective:1000px;
设置3d效果
transform:***;
位移
transform:translateX();
transform:translateY();
transform:translateZ();
缩放
transform:scaleX();
transform:scaleY();
transform:scaleZ();
旋转
transform:rotateX();
transform:rotateY();
transform:rotateZ();
混用(连用时各效果均写在一个transform内，用空格隔开)
transform:translateX() rotateY();