CSS 3D Transforms

2025年3月26日 | 阅读 3 分钟

CSS 3D 变换功能使您能够将元素在 X 轴、Y 轴和 Z 轴上移动。以下是 3D 变换方法的列表

函数	描述
matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	它使用一个 16 个值的 4x4 矩阵指定 3D 变换。
translate3D(x,y,z)	它指定 3D 翻译。
translateX(x)	它仅使用 X 轴的值指定 3D 翻译。
translateY(y)	它仅使用 Y 轴的值指定 3D 翻译。
translateZ(z)	它仅使用 Z 轴的值指定 3D 翻译。
scale3D(x,y,z)	它指定 3D 缩放变换
scaleX(x)	它通过提供 X 轴的值来指定 3D 缩放变换。
scaley(y)	它通过提供 Y 轴的值来指定 3D 缩放变换。
scaleZ(z)	它通过提供 Z 轴的值来指定 3D 缩放变换。
rotate3D(X,Y,Z,angle)	它指定沿 X 轴、Y 轴和 Z 轴的 3D 旋转。
rotateX(angle)	它指定沿 X 轴的 3D 旋转。
rotateY(angle)	它指定沿 Y 轴的 3D 旋转。
rotateZ(angle)	它指定沿 Z 轴的 3D 旋转。
perspective(n)	它为 3D 变换的元素指定透视视图。

支持的浏览器

属性	Chrome	IE	Firefox	Opera	Safari
transform	36.012.0 -webkit-	10.0	16.0 10.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
transform-origin (三值语法)	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
transform-style	36.012.0 -webkit-	11.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective-origin	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-

3D rotateX() 方法 (X 轴旋转)

CSS 3D rotateX() 方法用于根据给定的度数围绕元素的 X 轴旋转该元素。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
}
div#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This is JavaTpoint!
</div>
<div id="myDiv">
This is JavaTpoint!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>
</body>
</html>

3D rotateY() 方法 (Y 轴旋转)

CSS 3D rotateY() 方法用于根据给定的度数围绕元素的 Y 轴旋转该元素。

请看这个例子

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color:lightpink;
    border: 1px solid black;
}

div#myDiv {
    -webkit-transform: rotateY(150deg); /* Safari */
    transform: rotateY(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Welcome to JavaTpoint!.
</div>
<div id="myDiv">
Welcome to JavaTpoint!.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>

3D rotateZ() 方法 (Z 轴旋转)

CSS 3D rotateZ() 方法用于根据给定的度数围绕元素的 Z 轴旋转该元素。

请看这个例子>

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}
div#myDiv {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Welcome to JavaTpoint!
</div>
<div id="myDiv">
Welcome to JavaTpoint!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>

下一个主题CSS 听觉媒体

CSS 3D Transforms

支持的浏览器

3D rotateX() 方法 (X 轴旋转)

3D rotateY() 方法 (Y 轴旋转)

3D rotateZ() 方法 (Z 轴旋转)

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 3D Transforms

支持的浏览器

3D rotateX() 方法 (X 轴旋转)

3D rotateY() 方法 (Y 轴旋转)

3D rotateZ() 方法 (Z 轴旋转)

相关帖子

CSS radial-gradient

flex-shrink property

CSS User Interface

CSS Loader

flex-flow property

CSS 2D Transforms

CSS Tooltip Animation

CSS Combinators

CSS z-index

CSS Animation

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器