Skip to content

Instantly share code, notes, and snippets.

@Temikus

Temikus/index.html

Created August 20, 2012 19:48
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 Temikus/3407175 to your computer and use it in GitHub Desktop.
Save Temikus/3407175 to your computer and use it in GitHub Desktop.
Download ZIP
Webkit sample for tinkering
Raw
index.html
<!-- WEBKIT SAMPLE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
#box div
{
position: absolute;
height: 160px;
width: 160px;
border: 3px solid #000;
background: rgba(0,200,100,0.8);
text-align: center;
font-size: 130px;
}
#box
{
-webkit-animation-name: animation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 3s;
margin:80;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 80px 80px 0;
}
#box .one
{
-webkit-transform: translateZ(80px);
}
#box .two
{
-webkit-transform: rotateX(-90deg) translateZ(80px);
}
#box .three
{
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(80px);
}
#box .four
{
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(80px);
}
#box .five
{
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(80px);
}
#box .six
{
-webkit-transform: rotateY(90deg) translateZ(80px);
}
@-webkit-keyframes animation
{
from,to{}
120% { -webkit-transform: rotateY(-90deg);}
33% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);}
75% { -webkit-transform: rotateY(225deg) rotateZ(135deg);}
66% { -webkit-transform: rotateY(135deg) rotateX(135deg);}
83% { -webkit-transform: rotateX(135deg);}
}
</style>
<script type="text/javascript">
function init()
{
document.addEventListener("touchstart", function(event){event.preventDefault();}, false);
}
window.onLoad = init();
</script>
</head>
<body>
<h2 align=center>Webkit Sample</h1>
<div id="view" style="width:160px; height:160px; margin:80px auto 0 auto;">
<div id="box">
<div class="one">T</div>
<div class="two">E</div>
<div class="three">M</div>
<div class="four">I</div>
<div class="five">K</div>
<div class="six">!</div>
</div>
</div>
</body>
</html>
Raw
script.js
$ ->
$('#btn').on 'click', ->
alert $('#txt').val()
Raw
style.css
body {
background: #eee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment