Skip to content

Instantly share code, notes, and snippets.

@ne-sachirou

ne-sachirou/README

Created November 29, 2014 11:09
Show Gist options
  • Save ne-sachirou/6661a4bb66c3dcaae363 to your computer and use it in GitHub Desktop.
Save ne-sachirou/6661a4bb66c3dcaae363 to your computer and use it in GitHub Desktop.
Download ZIP
Circle Hover 3D rotation Demo http://jsdo.it/ne_sachirou/cWknc
Raw
README
Circle Hover rotation Demo
Author : ne_Sachirou <[email protected]>
Date : 2014-2014
License : GPLv3 www.gnu.org/licenses/gpl.html
Raw
jsdoit.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>Circle Hover rotation Demo</title>
<style>
html, body {
height: 100%;
margin: 0;
}
body {
background: #797;
background: linear-gradient(to bottom, #797, #787);
}
.circle {
background : #f03;
border-radius : 50%;
float : left;
height : 48mm;
margin : 6mm;
position : relative;
transition : 0.4s ease-in-out;
width : 48mm;
}
.circle:hover {
box-shadow : 0 0 3mm rgba(255, 255, 255, 0.9) inset;
}
.circle-faces {
transform-style : preserve-3d;
transition : 0.4s ease-in-out;
}
.circle-faces:hover {
transform : rotate3d(0, 1, 0, -180deg);
}
.circle-face {
border-radius : 50%;;
cursor : pointer;
height : 42mm;
left : 3mm;
line-height : 42mm;
position : absolute;
text-align : center;
text-shadow : 1px 1px 2px #ccc;
top : 3mm;
width : 42mm;
}
.circle-frontFace {
background : #69f;
backface-visibility : hidden;
}
.circle-backFace {
background : #6f6;
transform : rotate3d(0, 1, 0, 180deg);
}
</style>
</head>
<body>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
<div class="circle">
<div class="circle-faces">
<div class="circle-face circle-backFace">Back Face</div>
<div class="circle-face circle-frontFace">Front Face</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment