Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- media query
- 자바
- frontend
- redux
- 코딩테스트
- webpack
- react-router-dom
- HTML
- node.js
- github
- 자바문제풀이
- 변수
- 프론트엔드
- JS
- 그럼에도불구하고
- 그럼에도 불구하고
- CSS
- coding
- 코드업
- node
- TypeScript
- max-width
- 반응형 페이지
- react
- git
- @media
- java
- cleancode
- Servlet
- JavaScript
Archives
- Today
- Total
그럼에도 불구하고
[Visual Studio Code] 여러가지 transform 이용해보기 본문
HTML, CSS/Function implementation
[Visual Studio Code] 여러가지 transform 이용해보기
zenghyun 2022. 11. 7. 13:13여러가지 transform을 이용해보자
test.html
<!DOCTYPE html>
<html lang="ko">
<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> transform : 2D </title>
<link rel="stylesheet" href="../style/reset.css">
<link rel="stylesheet" href="../style/box.css">
<style>
.box {box-sizing: content-box;
background-color: transparent;
border: 1px solid black;
margin: 100px;
}
span { display: block;
width: 100%; height: 100%;
background-color: skyblue;
transition: 0.4s;
}
.box01:hover>span {transform: translateX(50px);}
.box02:hover>span {transform: translateY(50px);}
/* transform : translate? : x축 y축 이동 */
.box03:hover>span {transform: translate(50px, 50px);}
.box04:hover>span {transform: rotate(45deg);}
.box05:hover>span {transform: skewX(20deg);}
.box06:hover>span {transform: skewX(-20deg);}
.box07:hover>span {transform: skewY(20deg);}
.box08:hover>span {transform: skewY(-20deg);}
.box09:hover>span {transform: scale(0.5);}
/* scale은 단위를 사용하지 않고
1보다 작으면 축소, 1보다 크면 확대
음수를 사용하면 뒤집힘 음수를 사용해도 -1보다 적으면 확대됨
*/
.box10:hover>span {transform: scale(1.5);}
.box11:hover>span {transform: scale(-0.7);}
/* -를 붙이면 뒤집힘 */
.box12:hover>span {transform: scaleX(0.5);}
.box13:hover>span {transform: scaleY(0.5);}
.box14:hover>span {transform: scale(0.5) translateX(50px);}
.box15:hover>span {transform: translateX(50px) rotate(45deg);}
.box16:hover>span {transform: rotate(45deg) translateX(50px); }
/* box15와 box16은 다르다. */
.box17:hover>span {transform: scale(0.5) translateX(50px) rotate(45deg); }
</style>
</head>
<body class="flex">
<div class="box box01"><span>box01</span></div>
<div class="box box02"><span>box02</span></div>
<div class="box box03"><span>box03</span></div>
<div class="box box04"><span>box04</span></div>
<div class="box box05"><span>box05</span></div>
<div class="box box06"><span>box06</span></div>
<div class="box box07"><span>box07</span></div>
<div class="box box08"><span>box08</span></div>
<div class="box box09"><span>box09</span></div>
<div class="box box10"><span>box10</span></div>
<div class="box box11"><span>box11</span></div>
<div class="box box12"><span>box12</span></div>
<div class="box box13"><span>box13</span></div>
<div class="box box14"><span>box14</span></div>
<div class="box box15"><span>box15</span></div>
<div class="box box16"><span>box16</span></div>
<div class="box box17"><span>box17</span></div>
</body>
</html>
결과
box01
box02
box03
box04
box05
box06
box07
box08
box09
box10
box11
box12
box13
box14
box15
box16
box17
'HTML, CSS > Function implementation' 카테고리의 다른 글
[Visual Studio Code] 이미지 위에 글 띄우기 (0) | 2022.11.07 |
---|---|
[Visual Studio Code] transform-origin (0) | 2022.11.07 |
[Visual Studio Code] 여러가지 transition 사용해보기 (0) | 2022.11.02 |
[Visual Studio Code] opacity / transition-duration 이용해보기 (0) | 2022.11.02 |
[Visual Studio Code] flex-direction (0) | 2022.11.01 |
Comments