Hi Friends...There is nothing more flashy and full with eye-candy than an impressive 3D CSS demo. Although its utility outside of demos or portfolio sites is questionable, 3D CSS offers some powerful features to designers and developers that can win the hearts of users if done with good measure.
HTML & CSS Code
<!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/AVvXsEgQgr5zGwu9KDFJELC-Xlgjdp8wSRIf4BhKDZFV6AFSrJgc_Z2eiJsna2vnMs-guV1OgI9lqfO1hhBnc4V_QBNpbNgNyobAlz5meMtwCSM5WxrD4w11zqAqmsfakk863deRWWr6O54helSa/s1600-r/finalc%2523logoPNGupdated.png" style="height:50px; width:100px;" />
</div>
</body>
</html>
0 comments:
Post a Comment