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