<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: pink;
height: 150px;
width: 150px;
}
.container {
background-color: white;
border: 1px solid black;
}
.transformed1:hover {
backface-visibility: visible;
transform-origin: 50% 42%;
transform: perspective(500px) rotateY(50deg) rotateX(0deg);
}
.transformed2:hover {
backface-visibility: visible;
transform-origin: 50% 42%;
transform: perspective(500px) rotateY(0deg) rotateX(45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="transformed1">박스1</div>
</div>
<p></p>
<div class="container">
<div class="transformed2">박스2</div>
</div>
</body>
</html>See the Pen Untitled by byeolchorong (@byeolchorong) on CodePen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
background-color: pink;
border: 1px solid red;
width: 100px;
height: 100px;
margin: 50px;
transition: width 3s, height 3s, border 3s, transform 3s;
}
div:hover {
width: 200px;
height: 200px;
border: 3px solid blue;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div>마우스를 올리면 박스가 회전하면서 커져용~~~~</div>
</body>
</html>
See the Pen Untitled by byeolchorong (@byeolchorong) on CodePen.
'웹프로그래밍 CSS3 > CSS전환 & 변환' 카테고리의 다른 글
| 전환과 변환 3 (0) | 2025.03.16 |
|---|---|
| 전환과 변환 2 (0) | 2025.03.15 |
| transitions (0) | 2025.03.15 |