https://www.codingfactory.net/12593
rotate
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
width: 100px;
height: 100px;
margin: 60px auto;
background-color: orange;
transition: all ease 1s;
}
.jb:hover {
transform: rotate( 45deg );
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>rotateX
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
width: 100px;
height: 100px;
margin: 60px auto;
background-color: orange;
transition: all ease 1s;
}
.jb:hover {
transform: rotateX( 45deg );
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>짜부가된다.
rotateY
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
width: 100px;
height: 100px;
margin: 60px auto;
background-color: orange;
transition: all ease 1s;
}
.jb:hover {
transform: rotateY( 45deg );
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>좌우로 짜부가 된다.
rotate(마이너스)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.jb {
width: 100px;
height: 100px;
margin: 60px auto;
background-color: orange;
transition: all ease 1s;
}
.jb:hover {
transform: rotate( -45deg );
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>거꾸로 돌아가게 된다.
꾸준함이란 ... ?