css3의 transsform 속성을 설명하고자 합니다,
transsform은 개체의 모양을 변형 혹은 회전등의 외곡을 줄 수 있는 속성으로 기존 javascript에 의존적이던 기능을 css3 transsform 속성만으로 구현할 수 있습니다.
-webkit, -moz, -ms, -o 와 같은 접두사를 통해 브라우저 호환성을 확보할 수 있지만, IE9 미만의 브라우저에서는 호환되지 않으니 유념 하시길 바랍ㄴ다.
IE8 이하의 브라우저 호환성을 배제한 프로젝트라면 javascript에 의존하지 않은 깔끔한 개발이 가능하겠네요.
1. 접두사 안내
위에서 언급 되었듯, 접두사를 통해 브라우저 호환성을 확보할 수 있는데, 접두사는
transform:속성;
-webkit-transform:속성;
-moz-transform:속성;
-ms-transform:속성;
-o-transform:속성;와 같이 여러 줄로 중복 작성해 주면 됩니다.
2. transform-origin : transform의 변형, 회전 기준점을 정한다.
transform의 rotate(), skew() 등의 변형, 회전 속성을 사용을 위해 개체가 변형될 기준점을 설정해 줘야 합니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.transform-origin {
transform-origin:0% 0%;
transform:rotate(20deg);}
</style>
<body>
<div class="transform-origin">transform-origin</div>
</body>위 화면은 transform-origin:0% 0%; 로 선언 후 도형을 회전하는 rotate()를 적용한 소스코드입니다.
0% 0% 는 회전 기준점을 좌측 상단으로 선언한 것이며, 이 기준점으로 rotate 한 것입니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.transform-origin {
transform-origin:100% 100%;
transform:rotate(20deg);}
</style>
<body>
<div class="transform-origin">transform-origin</div>
</body>위 화면은 100% 100%로 적용한 소스코드이며, 우측 하단 모서리에 기준점이 적용되어 rotate 됩니다.
3. rotate() : 개체를 회전
transform-origin 으로 기준점이 정해 졌다면, 이제 다양한 속성들로 개체 변형이 가능하게 됩니다.
첫번째로 설명할 rotate()는 회전각을 입력하여 개체를 회전시킬 수 있습니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.rotate {
transform:rotate(20deg);
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);}
</style>
<body>
<div class="rotate">rotate</div>
</body>
4. rotateX(), rotateY() : 개체를 입체적 회전
rotate()는 카메라가 위에서 아래로 보는 시점으로 개체를 회전시키지만,
rotateX(), rotateY()는 정면에서 입체적으로 개체를 회전 시킵니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.rotate {
transform:rotateY(50deg) rotateX(10deg);
-moz-transform:rotateY(50deg) rotateX(10deg);
-webkit-transform:rotateY(50deg) rotateX(10deg);
-o-transform:rotateY(50deg) rotateX(10deg);}
</style>
<body>
<div class="rotate">rotate</div>
</body>
5. scale() : 개체 크기를 변형
scale()은 개체의 크기를 변형 합니다.
상하좌우로 길쭉하게 고무줄로 당기듯 늘어납니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.scale {
transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
-o-transform:scale(1.5,1.5);}
</style>
<body>
<div class="scale">scale</div>
</body>위는 개체의 크기를 좌우 1.5배씩 늘리도록 속성값을 선언한 소스코드입니다.
scale(수치1,수치2) 에서 수치1은 상하 늘어나는 정도를, 수치2는 좌우 늘어나는 정도를 선언 합니다.
6. skew() : 개체 카메라 앵글을 변형
skew()는 개체의 카메라 시점(앵글)을 변형하여 입체적인 모습을 연출합니다.
skew() 역시 scale()과 마찬가지로 skewX(), skewY()로 x,y축의 앵글을 별도로 지정할 수 있습니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.skew {
transform:skew(10deg,10deg);
-moz-transform:skew(10deg,10deg);
-webkit-transform:skew(10deg,10deg);
-o-transform:skew(10deg,10deg);}
</style>
<body>
<div class="skew">skew</div>
</body>
7. translate() : 개체의 위치를 이동
translate() 속성은 개체의 x,y 좌표값으로 위치를 이동 시키는 속성입니다.
scale() 속성과 같이 translateX(), translateY() 로 x,y축을 별도 설정할 수 있습니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.translate {
transform:translate(50px,50px);
-moz-transform:translate(50px,50px);
-webkit-transform:translate(50px,50px);
-o-transform:translate(50px,50px);}
</style>
<body>
<div class="translate">translate</div>
</body>
8. 여러 속성 중복 사용하기
transform의 여러 속성들을 동시 적용할 때에는 속성들을 중복으로 사용 가능합니다.
<style>
div {
background:#900;
margin:50px;
padding-top:20px;
width:100px;
height:80px;
color:#fff;
font-size:12px;
text-align:center;}
.translate {
transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);
-moz-transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);
-webkit-transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);
-o-transform:translate(50px,50px) rotate(-10deg) scale(1.5,1.1);}
</style>
<body>
<div class="translate">translate</div>
</body>위는 scale(), translate(), rotate() 속성을 중복으로 동시에 적용한 소스코드 입니다.
<!--transform을 검색하다가 메모해 놓았던 내용들인데 어디서 얻었던 정보인지 기억이 안나네요.-->
'공부 > html, css' 카테고리의 다른 글
| 폰트 그림자 넣기 (text-shadow) (0) | 2023.01.07 |
|---|---|
| 웹폰트 적용하기 (0) | 2023.01.07 |
| css3 Animations 속성 (animation, keyframes) (0) | 2023.01.07 |
| 자동줄바꿈 : 긴 텍스트 줄 바꿈 안될 때 (word-break:break-all;) (0) | 2023.01.07 |
| 자동줄바꿈 : 말 줄이기 비교 (text-overflow : visibile, text-overflow : ellipsis) (0) | 2023.01.07 |
