CSS3에서는 변형속성을 사용해 움직임을 구현할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 변형 속성</title>
<style>
.space {
width:200px; height:200px;
background:orange;
}
.space:hover {
width: 400px;
height: 500px;
}
.space:active {
background: red;
}
</style>
</head>
<body>
<div class="space"></div>
</body>
</html>
위처럼 변형속성에는 여러가지가 있습니다. 먼저 transition-duraition 속성을 입력합니다. 다음 붉은색 코드를 추가하면 됩니다.
.space [
width : 200px; height: 200px;
background : orange;
transition-duration: 2s;
}
코드를 실행하고 마우스를 올리거나 클릭한 상태로 있으면 2초동안 변형 속성이 적용됩니다.
CSS3의 변형 속성은 다음 스타일 속성과 함께 적용할 수 있습니다.
* 위치 속성 : top, left, bottom, right
* 크기 속성 : width, height
* 박스 속성 : margin, padding
* 테두리 속성 : border-width, border-radius, border-color
* 색상 속성 : color, background-color
* 투명도 속성 : opacity
* 변환 속성 : transform
● 변형 속성 (transition)
속성 |
설명 |
transition |
모든 transition 속성을 한 번에 적용 |
transition-delay |
이벤트 발생 후 몇 초 후에 재생할지 지정 |
transition-duration |
몇 초 동안 재생할지 지정 |
transition-property |
어떤 속성을 변형할지 지정 |
transition-timimg-function |
수치 변형 함수를 지정 |
'웹코딩 > HTML5 CSS3' 카테고리의 다른 글
| CSS3 변형 속성 transition-delay | transition-timing-function (0) | 2016.11.04 |
|---|---|
| HTML5 입력양식 태그 (0) | 2016.11.03 |
| HTML5 video 태그 ie 에서 실행되지 않을때 video.js 플러그인 (0) | 2016.11.03 |
| HTML5 비디오 요소 (0) | 2016.10.12 |
| HTM5에 새로 추가된 주요 태그들 (0) | 2016.10.12 |
