728x90
반응형
CSS 2D
1. transform
transform은 이차원 좌표에서 요소를 변형시키는 속성으로
이동(translate), 확대(scale), 축소(scale), 회전(rotate), 경사(skew)등을 만들 수 있다.
[2D 변형을 위해 제공되는 메소드]
| 메소드명 | 설명 |
| translate() | 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동함 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동 |
| scale() | 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임 주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄임 |
| rotate() | 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전함 주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전 |
| skew() | 해당 요소를 주어진 각도만큼 x축 방향으로 기울임 주어진 각도가 양수이면 x축의 양의 방향으로, 음수이면 x축의 음의 방향으로 기울임 |
[예제]
<style>
body{margin-left: 100px;}
p{
width: 600px;
padding: 15px;
border: 3px solid rgb(0, 0, 0,0.5);
}
#trans1{
transform: translate(30px, 30px);
background-color: deepskyblue;
}
#trans2{
transform: rotate(60deg);
background-color: gold;
}
#trans3{
/*scale(가로값,세로값)*/
transform: scale(1.5,2.0);
background-color: orange;
}
#trans4{
transform: skew(30deg,15deg);
background-color: yellowgreen;
}
</style>
<body>
<h2>transform</h2>
<p>original</p>
<p id="trans1">translate</p>
<p id="trans2">rotate</p>
<p id="trans3">scale</p>
<p id="trans4">skew</p>
</body>
2. transition
transition은 요소에 추가할 css 스타일 전환효과를 설정한다.
추가할 전환효과나 지속될 시간도 설정할 수 있다.
[전환을 위해 제공되는 속성]
| 속성명 | 설명 |
| transition | 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| transition-delay | 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함. |
| transition-duration | 전환(transition) 효과가 지속될 시간을 설정함. |
| transition-property | 요소에 추가할 전환(transition) 효과를 설정함. |
| transition-timing-function | 전환(transition) 효과의 시간당 속도를 설정함. |
- transition 속성
transition 속성은 모든 속성을 이용한 스타일을 한 줄에 설정할 수 있다.
선택자{transition: property timing-function duration delay;}
- transition-timing-function 속성
transition-timing-function 속성은 전환(transition) 효과의 시간당 속도를 설정한다.
[transition-timing-function 속성의 속성값]
| 속성값 | 설명 |
| linear | 전환 효과가 처음부터 끝까지 일정한 속도로 진행 |
| ease | 기본값. 전환효과가 천천히 시작되어 그 다음에는 빨라지고 마지막에는 느려짐 |
| ease-in | 전환효과가 천천히 시작됨 |
| ease-out | 전환효과가 천천히 끝남 |
| ease-in-out | 전환효과가 천천히 시작되어 천천히 끝남 |
transition 과 transition-timing-function을 사용한 예시
<style>
div{
width: 100px;
height: 100px;
float: left;
margin: 30px;
}
#bg-tr{
background-color: gold;
transition: all ease 2s;
/*천천히 시작되어 그 다음에는 빨라지고 마지막에는 느려짐*/
}
#border-tr{
background-color: deepskyblue;
border: 3px dotted black;
transition: all linear 1.5s;
/*처음부터 끝까지 일정한 속도로 진행*/
}
#bg-tr:hover{ /*#bg-tr요소에 마우스를 올리면 스타일변경*/
background-color: red;
}
#border-tr:hover{/*#border-tr요소에 마우스를 올리면 스타일 변경*/
background-color: skyblue;
border: 3px dotted black;
border-radius: 50%;
}
</style><body>
<h2>transition - 1</h2>
<div id="bg-tr"></div>
<div id="border-tr"></div>
</body>
결과 !
-transition-delay
transition-delay 속성은 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정한다.
전환(transition) 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작된다.
[예시]
<style>
h2{text-align: center;}
#ex{
position: relative;
width: 800px;
height: 300px;
margin: 0 auto;
border-radius: 30px;
border: 5px solid black;
padding: 30px;
}
.box{
font-size: 20px;
position: relative;
width: 100px;
height: 100px;
margin-bottom: 50px;
background-color: deepskyblue;
}
p{
text-align: center;
padding-top: 30px;
font-weight: bold;
}
#ex:hover > .box{
/*ex에 마우스를 올리면 box를 이렇게 바꿀거야*/
margin-left: 700px;
transform: rotate(720deg); /*720도 회전*/
}
#no-delay{
transition-duration: 3s;
/*몇초동안 transition을 줄건지 설정*/
}
#delay{
transition-delay: 1s; /*1초 딜레이*/
transition-duration: 2s;
}
</style>
<body>
<h2>transition - 2</h2>
<div id="ex">
<div id="no-delay" class="box"><p>(✿◡‿◡) no-delay</p></div>
<div id="delay" class="box"><p>ヾ(•ω•`)o delay</p></div>
</div>
</body>
결과!
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
728x90
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| 22 CSS의 우선순위 계산 (0) | 2021.05.11 |
|---|---|
| 21 CSS Animation (0) | 2021.05.11 |
| 19 벤더 프리픽스(vender prefix) (0) | 2021.05.10 |
| 18 미디어쿼리와 시맨틱태그 (0) | 2021.05.09 |
댓글