Skip to content

Instantly share code, notes, and snippets.

@fangge

fangge/jsbin.untitled.css

Created May 6, 2014 12:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fangge/11559902 to your computer and use it in GitHub Desktop.
Save fangge/11559902 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.untitled.css
body {
font-family: 'Crimson Text', georgia, times, serif;
font-size: 2em;
line-height: 1.3;
}
.box{
width:800px;
margin:0 auto;
}
@-webkit-keyframes rotate-h1{
0%{-webkit-transform:perspective(1000px) rotateY(-10deg)}
100%{-webkit-transform:perspective(1000px) rotateY(10deg)}
}
h1{
font-weight:bold;
text-align:center;
font-size:6em;
line-height:1;
-webkit-transform-style:preserve-3d;
-webkit-animation:rotate-h1 2s infinite alternate ease-in-out;
-webkit-transform:perspective(1000px) rotateY(0deg);
-webkit-transition:all 2s ease-in-out;
}
h1 .short {
text-transform: lowercase;
display: inline-block;
font-weight: normal;
font-size: 0.27em;
-webkit-transform: translateZ(-50px);
}
h1 .d3 {
display: inline-block;
-webkit-transform: translateZ(20px);
}
h1 .transforms {
display: inline-block;
font-weight: normal;
font-size: 0.6em;
-webkit-transform: translateY(-0.6em) translateZ(50px);
}
Raw
jsbin.untitled.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>-webkit-animation- demo</title>
<meta name="description" content="-webkit-animation- demo." />
<meta name="author" content="Mr.F" />
</head>
<body>
<div class="box">
<h1>
<span class="short">A very short introduction to</span>
<span class="css">CSS<span class="d3">3D</span></span>
<span class="transforms">transforms</span>
</h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment