gwooden_코린이

html + CSS transform 기능 살펴보기 본문

프론트엔드/html

html + CSS transform 기능 살펴보기

gwooden22 2022. 12. 19. 13:11
728x90
<!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>
  <link rel="stylesheet" href="css/style4.css">
</head>
<body>
  <div>
    
  </div>
</body>
</html>
div {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  left: 100px;
  top: 100px;

  /* transform: translateX(10px) <--x 좌표;
  transform: translateY(10px); <-- y 좌표 */

  /* transform: scale(2, 3);  <--- 크기조절*/

  /* transform-origin: left top; <-- 회전시 중심점 설정하기 (디폴트값은 중앙)*/
  /* transform: rotate(45deg); <-- 회전 */

  /* transform: skew(10deg, 10deg); <--기울기 */
  /* transform: skewX(10deg); <--X축 기울기 */
  /* transform: skewY(10deg); <--Y축 기울기 */
  

}
728x90
저작자표시 비영리 변경금지 (새창열림)

'프론트엔드 > html' 카테고리의 다른 글

html + CSS 가상 클래스  (0) 2022.12.19
html + CSS 애니메이션  (0) 2022.12.19
html + CSS 네비바 활용한 간단한 페이지 및 sns 프로필 만들어보기  (0) 2022.12.19
css 포지션 position  (0) 2022.12.16
html + CSS 네이버 로그인 창 만들어보기  (0) 2022.12.16
'프론트엔드/html' Related Articles more
Comments