[CSS] ch05-03. rotate

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