CSS 효과 및 필터

<목차로 돌아가기>

CSS는 다양한 효과를 설정할 수 있다. 아래에서 천천히 알아보자

투명도

opacity 속성을 이용하면 요소의 투명도를 조절할수 있다. 

투명도는 실수 0.0에서 1.0을 사용해서 지정한다.

0.0이면 완전히 투명한 것이고 1.0이면 불투명한것이다.

img{ opacity:0.4;}

가시성

가시성이란 어떤 요소를 보이거나 안 보이게 하는 것이다. 속성으로는 visibility가 사용된다.

hidden:요소를 보이지 않게 한다.

visible(기본값) : 요소를 보이게 한다.

a{ visibility:hidden;}

비슷한 것으로 display:none이 있다. 하지만 display:none;으로 설정하면 화면에서 자리도 차지하지 않고 완전히 제외된다. 따라서 일시적으로 어떤 요소를 보이제 않게 하려면 visibility 또는 display중에서 하나를 골라서 사용하면 된다.

전면효과

CSS3를 사용하면 하나의 형태에서 다른 형태로 변화되는 효과를  추가할 수 있다. 예전에는 플레시나 자바스크립트를 사용해야 얻을 수 있었던 효과를 CSS3에서 쉽게 지정이 가능하다. 이 것을 전환(transitions)이라고 한다. 전환은 요소가 하나의 스타일에서 다른 스타일로 점진적으로 변화하는 것이다.

전환을 지정하기 위해서는 다음과 같은 2가지를 지정해야 한다.

효과를 추가하고 싶은 CSS속성을 지정한다.

효과의 지속 시간을 지정한다.

transition : width 5s;

rotate : (180deg);

만약 지속시간이 지정되지 않으면 0으로 간주되기 때문에 전환 효과가 발생하지 않는다.

전환 효과는 지정된 CSS 속성의 값이 변경될 때 시작한다. 

div { 

width:200px;

transition: width 5s; /* 브라우저*/

-webkit-transition : width 5s;   /*사파리*/

-moz-transition : width 5s;  /* 모질라(파이어폭스)*/

-o-transition : width 5s;  /*오페라 */

}

div:hover{

width:300px;

}

변환(transformation

도형을 이동하고, 도형의 크기를 변환하며, 도형을 회전할 수 있다.

transform : translate(10px, 10px) - 평행이동

transform : rotate(45deg) - 회전

transform : scale(3, 1.5) - 크기변환

transform : skew(30deg, 10deg) - 비틀기 변환

transform : matrix() - 일반적인 변환

평행이동 변환

div{

width : 100px;

height: 100px;

background-color:green;

}

div#box{

translate(100px, 0px);

}

<div id="box">box</div>

크기 변환

div{

width : 100px;

height: 100px;

background-color:green;

}

div#box{

transform:scale(1.5, 1.5);l

}

<div id="box">box</div>

기울림 변환

div{

width : 100px;

height: 100px;

background-color:green;

}

div#box{

transform: rotate(45deg);

}

<div id="box">box</div>

비틀림 변환

div{

width : 100px;

height: 100px;

background-color:green;

}

div#box{

transform: skew(45deg, 20deg);

}

<div id="box">box</div>

복합변환

div{

width : 100px;

height: 100px;

background-color:green;

}

div#box{

transform : translate(100px, 0px) rotate(45deg);

}

<div id="box">box</div>

matrix()

메서드는 모든 2차원 변환을 하나로 결합한다. matrix()메서드는 6개의 매개 변수를 가진다. 이는 rotate, scale, translate, skew를 나타낸다. 

div{

width : 100px;

height: 100px;

background-color:green;

}

div#box{

transform : metrix(0.8,0.5,-0.5,0.9.0.0);

}

<div id="box">box</div>

3차원 변환

translate3d(x,y,z) 3차원 평행 이동

translateX(x) 3차원 평행 이동(x축)

translateX(y) 3차원 평행 이동(y축)

translateX(z) 3차원 평행 이동(z축)

scaleX(x) 3차원 크기변환(x축)

scaleX(y) 3차원 크기변환(y축)

scaleX(z) 3차원 크기변환(z축)

rotate3d(x,y,z,angle) 3차원 회전 변환

rotateX(angle) 3차원 회전 변환(x축)

rotateY(angle) 3차원 회전 변환(y축)

rotateZ(angle) 3차원 회전 변환(z축)

perspective(n) 원근변환

.box{

background-color:yellow;

}

.trans{

backface-visibility:visible; /*후면을 보이게 하는 속성*/

transform-orign:50% 52%; /*변환원점 선택*/

transform: perspective(500px) rotateY(59deg) rotate(0deg);

}

<div class="box">

<div class="trans"></div>

</div>