使用 CSS3 3D 变换函数

百变鹏仔 4个月前 (09-19) #CSS

文章标签函数

使用 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>

输出

上面的代码将产生以下输出 -

文章推荐

使用 CSS3 3D 变换函数

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写