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 変換された要素のパース ビューを定義します。 |
