고정 헤더 영역
상세 컨텐츠
본문
반응형
transform-origin 속성 - 변형 기준점 설정하기
- transform-origin 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다.
transform-origin: <x축> <y축> <z축> | initial | inherit;
속성
- <x축> : 원점 기준의 x 좌푯값으로 길이 값이나 <백분율>, left, center, right 중에서 사용할 수 있다.
- <y축> : 원점 기준의 y 좌푯값으로 길이 값이나 <백분율>, top, center, bottom 중에서 사용할 수 있다.
- <z축> : 원점 기준의 z 좌푯값으로 길이 값만 사용할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
.transform {
transform-origin: left top;
}
</style>
</head>
<body>
<img src="test.png" class="transform">
</body>
</html>
perspective, perspective-origin 속성 - 원근감 표현하기
- perspective 속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게한다.
perspective: <크기> | none;
속성
- <크기> : 원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는 지를 픽셀 크기로 지정한다.
- none : perspective 를 지정하지 않는다. 기본 값이다.
- perspective-origin 속성은 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 줄 수 있다.
perspective-origin: <x축 값> | <y축 값>
속성
- <x축 값> : 웹 요소가 x축에서 어디에 위치하는 지를 지정한다. 사용할 수 있는 값은 길이 값이나 백분율, left, right, center이다. 기본 값을 50%이다.
- <y축 값> : 웹 요소가 y축에서 어디에 위치하는 지를 지정한다. 사용할 수 있는 값은 길이 값이나 백분율, top, center, bottom이다. 기본 값은 50%이다.
<html>
<head>
<meta charset="utf-8">
<style>
#pers {
perspective: 300px;
}
</style>
</head>
<body>
<div id="pers">
<img src="test.png">
</div>
</body>
</html>
backface-visibility 속성 - 요소의 뒷면 표시하기
- 요소의 뒷면을 보이고 싶지 않을 때 backface-visibility 속성을 이용해 요소의 뒷 면을 표시할 것 인지를 결정한다.
backface-visibility: visible | hidden
속성
- visible : 뒷면을 표시한다. 기본 값이다.
- hidden : 뒷면을 표시하지 않는다.
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS] 트랜지션 (0) | 2021.05.23 |
|---|---|
| [CSS] 변형 (0) | 2021.05.16 |
| [CSS] 가상 클래스와 가상 요소 (0) | 2021.05.13 |
| [CSS 기초] 속성 선택자 (0) | 2021.05.12 |
| [CSS 기초] 연결 선택자 (0) | 2021.05.11 |
댓글 영역