CSS3 3D 変換

3D 変換

CSS3 では、3D 変換を使用して要素を書式設定できます。

この章では、次の 3D 変換方法のいくつかを学習します:

rotateX()
rotateY()

2D 変換と 3D 変換の違いを確認するには、下の要素をクリックしてください。 :

ブラウザのサポート

表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

-webkit-、-ms-、または -moz- の直前の数字は、このプレフィックス属性をサポートする最初のブラウザーのバージョン番号です。

rotateX() メソッド

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

インスタンス

<!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:rotateX(120deg);
	-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</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>

<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

変換プロパティ

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

プロパティ説明 2D または 3D 変換を要素に適用します。を使用すると、変換された要素の位置を変更できます。は、ネストされた要素が 3D 空間でどのように表示されるかを指定します。 3D 要素の遠近効果を指定します。 3D要素の下端の位置を指定します。画面に向かっていないときに要素が表示されるかどうかを定義します。

CSS

transform

transform-origin

transform-style

perspective

perspective-origin

backface-visibility

3D変換方法

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

← CSS3 2D変換

CSS3遷移 →

提出する

CSS3 3D 変換

3D 変換

ブラウザのサポート

rotateX() メソッド

インスタンス

rotateY()メソッド

インスタンス

変換プロパティ

3D変換方法

PHP中国語ウェブサイト