반응형
CSS animation spin 맛보기 네모박스 360도 회전시키기
CSS animation을 사용해 본 경험이 많지 않지만, 맛보기용으로 네모박스를 360도 회전시키는 코드를 간단히 정리해 봤습니다. 소스 코드는 인터넷에 있는 코드를 여기저기서 참고해 필요한 코드를 가져와 정리만 한 것이지만 나름대로 기본적인 사항을 파악하는 데에는 도움이 되었던 것 같습니다.
div 태그에 table을 cell을 사용한 이유는 웹페이지 상 회전하는 네모박스를 가운데로 정렬하기 위해서 사용하였으며 CSS animation spin 코드를 이용해 브라우저 종류에 따라서 360도로 작동하는 소스 코드입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>그냥 네모 박스를 돌려보자.</title>
<style>
.box{
background-color: #fb2020;
display:block;
margin:0 auto;
padding:10px;
height:600px;width:600px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
.table{display:table;position:relative;width:100%;height:100%;margin-top: 200px;}
.cell{display:table-cell;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
</head>
<body>
<div class="table">
<div class="cell">
<div class="box"></div>
</div>
</div>
</body>
</html>
결과
개인적인 용도로 참고할 목적으로 정리한 코드이기도 하지만 필요한 분들이 있을 수 있다는 생각에 정리한 내용을 올려 봅니다.
반응형
