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 軸を中心に要素を指定された度だけ回転します。
りー
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 スケーリング変換を定義します。
新しいファイル
<!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>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
