Skip to content

Instantly share code, notes, and snippets.

@chuck0523

chuck0523/rotateBoxes1.html

Created July 24, 2015 14:27
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 chuck0523/2732a417a096284d7f72 to your computer and use it in GitHub Desktop.
Save chuck0523/2732a417a096284d7f72 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rotateBoxes1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="author" content="chuck">
<meta name="generator" content="Text(chromeApp)">
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
<title>Rotate boxes</title>
<link rel="stylesheet" type="text/css" href="rotateBoxes6.css">
<script src="jquery.min.js"></script>
</head>
<body>
<div class="stage">
<div class="cube">
<div class="cube1">(o・ω・o)</div>
<div class="cube2">( ・ω・ )</div>
<div class="cube3">(´；ω；｀)</div>
<div class="cube4">(｀・ω・´)</div>
<div class="cube5">(# ﾟДﾟ)</div>
<div class="cube6">ヽ(｀Д´#)ﾉ</div>
<div class="cube7">(・∀・)</div>
<div class="cube8">ヽ(=´▽`=)ﾉ</div>
</div>
</div>
<script>
$(document).ready(function(){
var log = function(x){console.log(x);}
var st = 0;
$(window).scroll(function(){
var st = $(window).scrollTop();
st = Math.floor(st/2);
$('.cube').css({
'-webkit-transform' : 'rotateX('+ st +'deg)',
'transform' : 'rotateX('+ st +'deg)'
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment