<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마무리 문제 2</title>
<style>
#container {
width:200px;
margin:30px auto;
}
img {
border:1px solid #ccc;
border-radius:50%;
box-shadow:5px 5px 30px 2px #000;
animation:rotateBear 2.5s infinite;
}
@keyframes rotateBear {
from{transform: perspective(200px) rotateY(0deg);}
50% {transform: perspective(200px) rotateY(-180deg);}
to {transform:perspective(200px) rotateY(-360deg);}
}
</style>
</head>
<body>
<div id="container">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fshop1.phinf.naver.net%2F20230303_232%2F1677854178308rfPli_JPEG%2F5156862192644180_301721110.jpg&type=a340" alt="곰인형 사진">
</div>
</body>
</html>
'css' 카테고리의 다른 글
| 12장 예제 - 플렉스 항목 배치하기 (0) | 2023.04.04 |
|---|---|
| 12장 예제 - 미디어 쿼리 화면 학인하기 (0) | 2023.04.03 |
| 11장 마무리 문제 1 (0) | 2023.04.03 |
| 11장 예제 - 애니메이션 2개를 한꺼번에 지정하기 (0) | 2023.04.03 |
| 11장 예제 - 애니메이션의 지점, 이름, 실행시간 적용하기 (0) | 2023.04.03 |
