CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS33D変換関数の操作

3D変換を使用して、要素をx軸、y軸、およびz軸に移動できます。以下は、CSS33D変換のメソッドの一部です-

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

Sr.No。 値と説明
1 matrix3d（n、n、n、n、n、n、n、n、n、n、n、n、n、n、n、n）
行列の16個の値を使用して要素を変換するために使用されます
2 translate3d（x、y、z）
x軸、y軸、z軸を使用して要素を変換するために使用されます
3 translateX（x）
x軸を使用して要素を変換するために使用されます
4 translateY（y）
y軸を使用して要素を変換するために使用されます
5 translateZ（z）
y軸を使用して要素を変換するために使用されます

以下はCSS33D変換関数のコードです-

例

<!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>

出力

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

CSS33D変換関数の操作


  1. CSS32D変換関数の操作

    2D変換は、平行移動、回転、拡大縮小、傾斜などの要素構造を再変更するために使用されます。 以下は、2D変換関数の一部です- Sr.No。 値と説明 1 matrix（n、n、n、n、n、n） 6つの値を持つ行列変換を定義するために使用されます 2 translate（x、y） x軸とy軸とともに要素を変換するために使用されます 3 translateX（n） x軸とともに要素を変換するために使用されます 4 translateY（n） y軸とともに要素を変換するために使用されます 5 scale（x、y） 要

  2. CSSの2D変換関数

    2D変換関数は、要素に回転、移動、スケーリング、およびスキューできる2D変換を適用するために使用されます。 翻訳 −要素をx軸とy軸に沿って移動します。 スケール −要素のサイズをxy方向に変更します。 回転 −要素をある程度動かすため。 スキュー −要素をxy方向に傾斜させる。 以下は、CSSの2D変換関数を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", T