wiki:css:css_note:css_2d_transforms

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_2d_transforms [2021/03/18 15:25]
emblim98 만듦
+++ wiki:css:css_note:css_2d_transforms [2023/01/13 18:44] (현재)
@@ 줄 10: / 줄 10: @@
 =====Source of the article====
   * [[https://www.w3schools.com/css/css3_2dtransforms.asp|2D Transforms Methods]]
+\\
+CSS ''transform'' 속성으로 아래의 2D 트랜스포메이션 방법을 사용할 수 있습니다.\\
+  * ''translate()''
+  * ''rotate()''
+  * ''scaleX()''
+  * ''scaleY()''
+  * ''scale()''
+  * ''skewX()''
+  * ''skewY()''
+  * ''skew()''
+  * ''matrix()''
 \\
 =====The translate() Method=====
+{{:wiki:css:css_note:translate.png|}}\\
+\\
+''translate()'' 속성은 요소를 현재 위치에서 X-축과 Y-축에 주어진 매개변수에 따라서 이동시킵니다.\\
+하기의 예제에서 div 요소를 현재 위치에서 우측으로 50px, 좌측으로 100px로 이동시킵니다.\\
+====예제====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The translate() Method</title>
+    <style>
+        #div01 {
+            border: 1px solid dodgerblue;
+            width: 300px;
+            height: 100px;
+            background-color: yellowgreen;
+            transform: translate(50px, 100px);
+            -ms-transform: translate(50px, 100px);
+        }
+    </style>
+</head>
+<body>
+    <h1>The translate() Method</h1>
+    <p>
+        The translate() method moves an element from its current position:
+    </p>
+    <div id="div01">
+        This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
+    </div>
+</body>
+</html>
+</code>
 {{tag>오션, CSS 2D Transforms Methods, translate}}

/var/services/web/dokuwiki/data/attic/wiki/css/css_note/css_2d_transforms.1616048700.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)