Jam's story

[CSS] 2D 변환 본문

WEB/CSS

[CSS] 2D 변환

애플쩀 2022. 5. 26. 15:45

2D 변환]

요소를 이동, 회전, 크기조정 및 기울기

transform 속성

2D 변환방법

  • translate() 요소를 이동
  • rotate() 요소를 회전
  • scaleX() 요소의 크기조정 - X축
  • scaleY() 요소의 크기조정 -Y축
  • scale() 요소의 크기조정 - X, Y축
  • skewX() 요소를 기울어지게... X축
  • skewY() 요소를 기울어지게... Y축
  • skew() 요소를 기울어지게
  • matrix() 이동/회전/크기조정/기울어지게

 

translate() 이동
transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px);

 

rotate 회전
 transform: rotate(20deg);
-ms-transform: rotate(20deg); 


transform: rotate(-20deg);
-ms-transform: rotate(-20deg);

20deg                와                        -20deg

 

 

버튼 누를때마다  회전
<!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>Document</title>
<style>
    div{
        width:300px;
        height: 50px;
        background-color: yellow;
        border: 1px solid black;
/*     1. 요소의 이동 
transform: translate(50px, 100px);
    -ms-transform: translate(50px, 100px);*/

/*     transform: rotate(-20deg);
-ms-transform: rotate(-20deg); */
    }
</style>
</head>
<body>
    <div>Lorem ipsum dolorl.</div>
    <button>회전</button>
<script>
    var angle=20;
    document.querySelector("button").onclick=function(){
        var target=document.querySelector("div");
        target.style.transform="rotate("+angle+"deg)";
        angle+=10;
    }
</script>
</body>
</html>

 

버튼 누르면 스스로 혼자 회전 + 멈추기 

 

<!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>Document</title>
    <style>
        div{width:200px;
        height: 30px;
        background-color:cornflowerblue;
        border-radius: 5px;
        }
    </style>
</head>
<body>
   <div>안녕1</div>
   <button>회전</button>
   <button>멈춤</button> 
<script>
    var angle=1;
    var timer;

    document.querySelector("button:first-of-type").onclick=function(){
        timer=setInterval(div_rotate,1);
    }
    function div_rotate(){
        var target=document.querySelector("div");
        target.style.transform="rotateY("+angle+"deg)";
        angle+=1;
    }

    document.querySelector("button:last-of-type").onclick=function(){
   
        clearInterval(timer);
    }
</script>
</body>
</html>
Document
안녕1

 

 

 

 

transform 크기조정 
  transform: scaleX(1.5); /* 너비  */
  transform: scaleY(1.5); /* 높이  */​
      /* 너비2배, 높이1/2배 */
        transform: scale(2,0.5);

 

 

skew 기울임 
transform: skewX(180deg); 
transform: skewY(20deg); 
x축, y축 
transform: skew(20deg,10deg);

transform: skew(20deg); 은 transform: skew(20deg,0);과 같다.

 

 

matrix(scaleX(), scaleY(), translateX(), translateY() ) 

 

 

 

rotate
<!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>Document</title>
<style>
    div{
        width:300px;
        height: 100px;
        background-color: yellow;
        border:1px solid black;
    }
    #demo{
        transform: rotateX(45deg);
        
    }
</style>
</head>
<body>
    <h3>CSS 3D 변환-transform 속성</h3>
    <pre>
        1.요소 회전
        rotateX(), rotateY(), rotateZ() , rotate3d(x,y,z)
        2.요소 이동
        translateX(), translateY(), translateZ(), translate3d(x,y,z)
        3.요소 크기
        scaleX(), scaleY(), scaleZ(), scale3d(x,y,z)
        4.matrix3d()



    </pre> 
     <button>회전</button>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic incidunt ullam fugit dolorum, accusantium soluta cupiditate corrupti minus quo non facere voluptas pariatur cumque </div>
    <div id="demo">Lorem, ipsum dolor.</div>
    <script>
        var angle=1;
        var timer;
         document.querySelector("button:first-of-type").onclick=function(){
      timer=setInterval(div_rotate,10);
    
    }
    function div_rotate(){
        var target=document.querySelector("#demo");
         target.style.transform="rotateX("+angle+"deg)";
       /* target.style.transform="rotateY("+angle+"deg)";
        target.style.transform="rotateZ("+angle+"deg)"; */

        angle+=1;
    }
    </script>
</body>
</html>

 

 

 

 

 

<!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>Document</title>
    <style> 
        #rotate2D, #rotate3D {
            width: 80px;
            height: 70px;
            color: white;
                  position:relative;
            font-weight:bold;
            font-size:15px;
            padding:10px;
            float:left;
            margin-right:50px;
            border-radius:5px;
            border:1px solid #000000;
            background:red;
            margin:10px;
        }
        </style>
        
</head>
<body>
    <div style="height: 80px;">
        <div id="rotate2D" onmouseover="rotateDIV();">2D rotate</div>
        <div id="rotate3D" onmouseover="rotateYDIV();">3D rotate</div>
        </div>
        <script>

            var x,y,n=0,ny=0,rotINT,rotYINT;
          
          function rotateDIV()
          {
             x=document.getElementById("rotate2D");
             clearInterval(rotINT);
             rotINT=setInterval("startRotate()",10);
          }
          function rotateYDIV()
          {
             y=document.getElementById("rotate3D");
             clearInterval(rotYINT);
             rotYINT=setInterval("startYRotate()",10);
          }
          function startRotate()
          {
             n=n+1;
             //        transform:rotateX(150deg);
             x.style.transform="rotate(" + n + "deg)";
             x.style.webkitTransform="rotate(" + n + "deg)";
             x.style.OTransform="rotate(" + n + "deg)";
             x.style.MozTransform="rotate(" + n + "deg)";
             if (n==180 || n==360)
             {
                clearInterval(rotINT);
             if (n==360){n=0}
             }
          }
          function startYRotate()
          {
             ny=ny+1
             y.style.transform="rotateY(" + ny + "deg)"
             y.style.webkitTransform="rotateY(" + ny + "deg)"
             y.style.OTransform="rotateY(" + ny + "deg)"
             y.style.MozTransform="rotateY(" + ny + "deg)"
             if (ny==180 || ny>=360)
             {
                clearInterval(rotYINT)
                if (ny>=360){ny=0}
             }
          }
          
          </script>
</body>
</html>

돌아간다.

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 애니메이션 효과  (0) 2022.05.26
[CSS] 2D, 3D 변환 transform, translate  (0) 2022.05.26
[CSS] 웹글꼴  (0) 2022.05.26
[CSS] 텍스트 속성  (0) 2022.05.26
[CSS] text-shadow, box-shadow  (0) 2022.05.26
'WEB/CSS' Related Articles more
Comments