<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Keat</title>
<style>
/* 오브젝트 변형
X축 : 화면의 좌표로는 수평 축.
Y축 : 화면의 좌표로는 수직 축.
Z축 : 3차원 좌표를 확장할 때 사용. 웹 브라우저를 보는 사람에 가까울 수로 양의 값
1. 2차원 변형
rotate : 2차원과 3차원 변형 모두 가능하며, 지정한 각도로 특정한 값만큼 시계방향(deg)
또는 시계 반대 방향(-값 deg)으로 회전 */
* {
margin: 0; padding: 0;
}
section {
width: 300px; height: 300px; border: 5px solid black; margin: 100px;
}
div {
width: 300px; height: 300px; background-color: royalblue;
}
div:hover {
/* transition-duration : CSS 속성을 변경할 때 애니메이션 속도를 조절 */
transition-duration: 2s;
transform: rotate(60deg); /* 60도로 변형 */
transform: rotate(-90deg); /* 시계반대방향 -> 마이너스 */
transform: rotateX(60deg); /* x축을 기점으로 회전 */
transform: rotateY(120deg); /* y축을 기점으로 회전 */
}
</style>
</head>
<body>
<section>
<div></div>
</section>
</body>
</html>