<html>
<head>
<style type="text/css">
.flip
{
width:200px;
height:200px;
}
.flip >.front
{
background-color:#0F0;
width:200px;
height:200px;
-webkit-backface-visibility:hidden;
position:absolute;
-webkit-transform:perspective(600px) rotateY(0deg);
transition:-webkit-transform 1s linear 0s;
box-shadow:0px 10px 10px 0px #333;
}
.flip >.back
{
background-color:#009;
width:200px;
height:200px;
-webkit-backface-visibility:hidden;
position:absolute;
-webkit-transform:perspective(600px) rotateY(180deg);
transition:-webkit-transform 1s linear 0s;
box-shadow:0px 10px 10px 0px #666666;
}
.flip:hover >.front
{
-webkit-transform:perspective(600px) rotateY(-180deg);
}
.flip:hover >.back
{
-webkit-transform:perspective(600px) rotateY(0deg);
}
</style>
<title>3d</title>
</head>
<body>
<div class="flip">
<div class="front"></div>
<div class="back"></div>
</div>
</body>
</html>
No comments :
Post a Comment