使用 CSS3 3D 变换函数

王林转载: 2023-09-16 14:33:07 515浏览

使用 3d 变换，我们可以将元素移动到 x 轴、y 轴和 z 轴。以下是 CSS3 3D 变换的一些方法 -

以下方法用于调用 3D 变换 -

Sr.No.	值和描述
1	matrix3d(n,n, n,n,n,n,n,n,n,n,n,n,n,n,n,n) 用于使用矩阵的 16 个值来变换元素
2	translate3d(x,y,z) 用于使用x轴变换元素,y轴和z轴
3	translateX(x) 用于使用 x 轴变换元素
4	translateY(y) 用于使用 y 轴变换元素
5	translateZ(z) 用于使用 y 轴变换元素

以下是 CSS3 3D 变换函数的代码 -

示例

现场演示

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   display: inline-block;
   width: 200px;
   height: 200px;
   border: 1px solid #CCC;
   margin-left: 20px;
}
.rotateX {
   width: 100%;
   height: 100%;
   background: rgb(52, 0, 241);
   transform: perspective(600px) rotateX(85deg);
}
.rotateY {
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) rotateY(75deg);
}
.translateZ{
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>