検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 3D 変換関数の使用

CSS3 3D 変換関数の使用

王林
王林転載
2023-09-16 14:33:07928ブラウズ

3D 変換を使用すると、要素を x 軸、y 軸、z 軸に移動できます。以下は CSS3 3D 変換のいくつかのメソッドです -

#次のメソッドは 3D 変換を呼び出すために使用されます -

#Sr.No.値と説明1matrix3d(n,n, n,n,n,n,n,n,n,n ,n, n,n,n,n,n)2translate3d(x,y,z)34 5以下は CSS3 3D 変換のコードですfunction-
は、行列の 16 個の値を使用して要素を変換するために使用されます
x 軸、y 軸、z 軸を使用して要素を変換するために使用されます
translateX(x) x 軸を使用して要素を変換する場合
translateY(y) Y 軸を使用して要素を変換するために使用されます
translationZ(z) y 軸を使用して要素を変換するために使用されます

Example

ライブ デモンストレーション 

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   display: inline-block;
   width: 200px;
   height: 200px;
   border: 1px solid #CCC;
   margin-left: 20px;
}
.rotateX {
   width: 100%;
   height: 100%;
   background: rgb(52, 0, 241);
   transform: perspective(600px) rotateX(85deg);
}
.rotateY {
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) rotateY(75deg);
}
.translateZ{
   width: 100%;
   height: 100%;
   background: rgb(55, 0, 255);
   transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

以上がCSS3 3D 変換関数の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css3
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSS疑似クラスとは次の記事：CSS疑似クラスとは

関連記事

続きを見る