CSS3 3D 変換

このセクションを学習する前に、3D 座標軸を見てみましょう

X、Y、Z を使用して空間の 3 次元をそれぞれ表し、3 つの軸は互いに垂直です。

3D 変換

CSS3 では、3D 変換を使用して要素をフォーマットできます。

この章では、次の 3D 変換メソッドのいくつかを学習します:

rotateX()

rotateY()

ブラウザのサポート

rotateX() メソッド

rotateX() メソッド、要素の周囲X 軸が指定された度だけ回転されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    #test{
        height:200px;
        width:200px;
        position:absolute;
        margin-top:100px;
        margin-left:100px;
    }
    #test div{
        height:200px;
        width:200px;
        background:lightblue;
        -webkit-transition: all .6s;
    }
    #test div:hover{
        -webkit-transform:rotateX(90deg);
    }
</style>
<body>
    <div id="test">
        <div></div>
    </div>
</body>
</html>

rotateY() メソッド

rotateY() メソッドは、Y 軸を中心に要素を指定された度だけ回転します。

りー

transformationプロパティ次の表には、すべての変換プロパティを示します。 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) は、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) は 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 type="text/css"> #test{ height:200px; width:200px; position:absolute; margin-top:100px; margin-left:100px; } #test #div2{ height:200px; width:200px; background:lightcoral; -webkit-transition: all .6s; position:relative; -webkit-transform:rotateX(-80deg) translateZ(200px); } #test:hover #div2{ -webkit-transform: rotateX(80deg); } </style> <body> <div id="test"> <div id="div2"></div> </div> </body> </html>

提出するリセットコード

自動運転