<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>모양 바꾸기</title>
<style>
img { width: 150px; }
@keyframes scale {
0%, 100% { transform: scale(1, 1); }
50% { transform: scale(0, 0) }
}
@keyframes rotateX {
0% { transform: rotateX(0); }
100% { transform: rotateX(360deg); }
}
@keyframes rotatePX {
0% { transform: perspective(150px) rotateX(0); }
100% { transform: perspective(150px) rotateX(360deg); }
}
@keyframes rotatePY {
0% { transform: perspective(150px) rotateY(0); }
100% { transform: perspective(150px) rotateY(360deg); }
}
@keyframes rotateZ {
0% { transform: rotateZ(0); }
100% { transform: rotateZ(360deg); }
}
@keyframes skew {
0%, 100% { transform: skew(0, 0); }
50% { transform: skew(40deg, 40deg); }
}
</style>
</head>
<body>
<img src="../media/italy.jpg" style="animation: scale 5s infinite"><br>
<img src="../media/italy1.jpg" style="animation: rotateX 5s infinite">
<img src="../media/italy1.jpg" style="animation: rotatePX 5s infinite"><br>
<img src="../media/italy3.jpg" style="animation: rotatePY 5s infinite"><br>
<img src="../media/italy4.jpg" style="animation: rotateZ 5s infinite"><br>
<img src="../media/italy5.jpg" style="animation: skew 5s infinite"><br>
</body>
</html>
]]>