Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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