Skip to content

Instantly share code, notes, and snippets.

@hydrangeas

hydrangeas/fiddle.css

Created March 15, 2012 08:18
Show Gist options
  • Save hydrangeas/2042903 to your computer and use it in GitHub Desktop.
Save hydrangeas/2042903 to your computer and use it in GitHub Desktop.
Download ZIP
さいころくるくる
Raw
fiddle.css
@-webkit-keyframes kurukuru {
0% {
-webkit-transform: translateZ(324.07203952454984px) rotateY(0deg) rotateX(0deg);
}
50% {
-webkit-transform: translateZ(324.07203952454984px) rotateY(180deg) rotateX(0deg);
}
100%{
-webkit-transform: translateZ(324.07203952454984px) rotateY(360deg) rotateX(0deg);
}
}
.viewport {
/*
-webkit-perspective-origin: 384px 512px;
-webkit-transform: scale(1.0, 1.0);
*/
}
@-webkit-keyframes up-down {
0% {
-webkit-transform: rotateX(-10deg) rotateY(20deg);
}
50% {
-webkit-transform: rotateX(-370deg) rotateY(380deg);
}
100% {
-webkit-transform: rotateX(-10deg) rotateY(20deg);
}
}
.cube {
position: relative;
height: 40px;
width: 40px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-10deg) rotateY(20deg);
}
.cube1 {
-webkit-transform: rotateX(-10deg) rotateY(20deg);
-webkit-animation: up-down 5s;
-webkit-animation-iteration-count: infinite;
}
.cube2:hover {
-webkit-transform: rotateX(-10deg) rotateY(20deg);
-webkit-animation: up-down 5s;
-webkit-animation-iteration-count: infinite;
}
.cube3:hover {
-webkit-transform: rotateX(-45deg) rotateY(380deg);
-webkit-transition: -webkit-transform 1s linear;
}
.cube > div {
position: absolute;
height : 36px;
width : 36px;
padding : 0px;
margin: 0px;
background-color: rgb(255, 99, 71);
border-radius: 10px;
border: #FFF 3px dotted;
text-align: center;
vertical-align: middle;
-webkit-backface-visibility: hidden;
}
.cube > div:first-child {-webkit-transform: rotateX(90deg) translateZ(20px);}
.cube > div:nth-child(2) {-webkit-transform: translateZ(20px);}
.cube > div:nth-child(3) {-webkit-transform: rotateY(90deg) translateZ(20px);}
.cube > div:nth-child(4) {-webkit-transform: rotateY(180deg) translateZ(20px);}
.cube > div:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(20px);}
.cube > div:nth-child(6) {-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(20px);}​
Raw
fiddle.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>DICE</title>
</head>
<body class="experiment">
<div id="annotations">
<div class="viewport"><div class="cube cube1"><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
<div style="margin-top: 50px;"></div>
<div class="viewport"><div class="cube cube2"><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
<div style="margin-top: 50px;"></div>
<div class="viewport"><div class="cube cube3"><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
</div>
</body>
</html>
​
Raw
fiddle.js
(function(window, undefined) {
$('.cube').on('click', function() {
console.log('clicked:' + (new Date()));
window.open('http://zenkei.com/');
});
})(window);
(function(window, undefined) {
var cnt = 0;
var init = function() {
setInterval(function() {
$('.viewport').css({
'-webkit-transform': 'translateZ(300px) rotateY(' + cnt + 'deg) rotateX(0deg) translateZ(-300px)'
});
cnt = (cnt + 1) % 360;
}, 10);
};
//window.onload = init;
})(window);​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment