[CSS] ch05-04. skew

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);
}