CSS3 3D 変換

CSS3 3D 変換

3D 変換

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>

プログラムを実行して試してみましょう

変換プロパティ

以下の表に、すべての変換プロパティを示します

プロパティ	説明	CS: S
変身	要素に 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)	3Dを定義変換、 16 値の 4x4 マトリックスを使用します。
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)	3D回転を定義します。
rotateX(angle)	は、X 軸に沿った 3D 回転を定義します。
rotateY(angle)	は、Y 軸に沿った 3D 回転を定義します。
rotateZ(angle)	は、Z 軸に沿った 3D 回転を定義します。
perspective(n)	3D 変換された要素のパースビューを定義します。

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear