transform,transitions

Transform

회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
transform

Transform: 속성
1.scale(확대할비율), 따로사용가능 scaleX(),scaleY()
2.translate(X,Y)이동할 위치, 따로사용가능 translateX() and translateY()
3.rotare(회전수turn or 각도deg )

사용예제)
마우스를 올리면 180도회전 두배로커짐 

  <style>
    body {
      background: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .box {
      background: white;
      width: 300px;
      height: 300px;
     
     /* Transform - rotate, scale, skew */
      /* transform: rotate(25deg); */
      /* transform: skew(25deg); */
      /* transform: scale(2); */
      transition: all 1s ease-in-out;
    }

    .box:hover {
      transform: rotate(180deg) scale(2);
      background-color: cyan;
      border-radius: 50%;
      transform: translate(100px, 100px);
      
      /* transform: skew(25deg); */
      /* transform: scale(2); */
      /* border-radius: 50%;
        background-color: blue; */
      /* transform: translateY(100px); */
      /* transform: translateX(-100px); */
      /* x & y */
      /* transform: translate(100px, 100px); */
      /* transform: translate3d(100px, 100px, 100px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

Transitions

효과의 지속시간

python의 yieldfrom 문법 빠른 학습
[Algorithm Study] 백준 1755

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage