Skip to content

Instantly share code, notes, and snippets.

@AminAzGol

AminAzGol/jsbin.untitled.css

Created July 14, 2014 07:49
Show Gist options
  • Save AminAzGol/1b3bd7767d1b54c07269 to your computer and use it in GitHub Desktop.
Save AminAzGol/1b3bd7767d1b54c07269 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.untitled.css
.parent3d{
-webkit-perspective: 500px;
}
.parent{
width: 300px;
height: 400px;
margin: 100px auto 0;
width: 200px;
height: 200px;
position: relative;
-webkit-transition: 2s;
-webkit-transform-style: preserve-3d;
}
.parent:hover{
-webkit-transform: rotateY(180deg);
}
.box1,
.box2{
width: inherit;
height: inherit;
font-size: 150px;
line-height: 200px;
text-align: center;
color: #fff;
position: absolute;
left: 0;
top: 0;
opacity: 0.9;
/* -webkit-backface-visibility: hidden; */
}
.box1{
background-color: #114;
}
.box2{
background-color: #411;
-webkit-transform: rotateY(180deg) translateZ(20px);
}
/* footer author link */
.alimd{
position: fixed;
right: 10px;
bottom: 10px;
text-decoration: none;
color: rgba(0,0,0,0.5);
}
.alimd:hover{
color: #222;
}
Raw
jsbin.untitled.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ali.MD Tutorial</title>
<meta name="description" content="An AliMD Web Technologies Tutorial" />
<meta name="author" content="Ali Mihandoost" />
</head>
<body>
<div class="parent3d">
<div class="parent">
<div class="box2">B</div>
<div class="box1">A</div>
</div>
</div>
<!-- footer author link -->
<a class="alimd" href="http://ali.md" title="Ali Mihandoost">by ali.md</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment