<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
/* How pronounced should the 3D effects be */
perspective:800px;
-webkit-perspective:800px;
background: radial-gradient(#e0e0e0, #aaa);
width:350px;
height:380px;
margin:0 auto;
border-radius:6px;
position:relative;
}
.iphone-front,
.iphone-back{
/* Enable 3D transforms */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/* We are using two separate divs for the front and back of the
phone. This will hide the divs when they are flipped, so that the
opposite side can be seen: */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width:200px;
height:333px;
position:absolute;
top:50%;
left:50%;
margin:-166px 0 0 -100px;
background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png)
no-repeat left center;
/* Animate the transitions */
/*transition:0.8s;*/
transition:1.5s;
}
.iphone-back{
/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
background-position:right center;
}
.container:hover .iphone-front{
/* When the container is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.container:hover .iphone-back{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
</style>
</head>
<body>
<div class="container">
<div class="iphone-front"></div>
<div class="iphone-back"></div>
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDx4ENlGMpgGklms8BkkVYgSBh7vJj0JbauaFHtG9o3t_c0nK6aqy9G7X0Tl1tLMhYdf0G7_Oa8p5snYdEPOT0tFRFkAUMEcvmBl9AnX0Xwk2low6B5nkuyvOCwNphrjD-SaphfYZsezby/s1600-r/finalc%2523logoPNGupdated.png"
style="height:50px; width:100px;" />
</div>
</body>
</html>
0 comments :
Post a Comment