Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

CSS3 3D 转换

CSS3 3D 转换

3D Transforms

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中，您将学到其中的一些 3D 转换方法：

  • rotateX()

  • rotateY()

rotateX() 方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color: #f4ff99;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateX(120deg);
            -webkit-transform:rotateX(120deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>

运行程序尝试一下

rotateY() 方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateY(130deg);
            -webkit-transform:rotateY(130deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>

运行程序尝试一下

转换属性

下表列出了所有的转换属性：


属性描述CSS
transform向元素应用 2D 或 3D 转换。3
transform-origin允许你改变被转换元素的位置。3
transform-style规定被嵌套元素如何在 3D 空间中显示。3
perspective规定 3D 元素的透视效果。3
perspective-origin规定 3D 元素的底部位置。3
backface-visibility定义元素在不面对屏幕时是否可见。3


3D 转换方法

函数描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。



Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { width:100px; height:75px; background-color: #f4ff99; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ } </style> </head> <body> <div>PHP.CN</div> <div id="div2">HELLO</div> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492837 spielt ab