728x90
반응형
03_rotate.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Translate3D</title>
<style>
@import "../css/03_rotate.css";
</style>
</head>
<body>
<div>
<img id="i1" src="../img/woman.png" />
</div>
<div>
<img id="i2" src="../img/woman.png" />
</div>
<div>
<img id="i3" src="../img/woman.png" />
</div>
</body>
</html>03_rotate.css
@CHARSET "UTF-8";
div{
float: left;
margin: 50px;
width: 150px;
height: 190px;
background-color: rgba(0,0,255,0.3);
perspective: 200px;
}
#i1:hover{
transform: rotateX(45deg);
}
#i2:hover{
transform: rotateY(45deg);
}
#i3:hover{
transform: rotate(45deg);
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch05-06. transition (0) | 2017.08.28 |
|---|---|
| [CSS] ch05-04. skew (0) | 2017.08.28 |
| [CSS] ch05-02. scale (0) | 2017.08.28 |
| [CSS] ch05-01. translate (0) | 2017.08.28 |
| [CSS] ch04-22. tb4 (0) | 2017.08.28 |