Skip to content

Instantly share code, notes, and snippets.

@ericlva

ericlva/Spinning-3d-sphere.markdown

Created September 29, 2013 09:38
Show Gist options
  • Save ericlva/6750951 to your computer and use it in GitHub Desktop.
Save ericlva/6750951 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Michael Beckius.
Raw
index.html
<div class="bounce">
<div class="axis-x">
<div class="axis-y">
<div class="axis-z">
<div class="y0"></div>
<div class="y1"></div>
<div class="y2"></div>
<div class="y3"></div>
<div class="y4"></div>
<div class="y5"></div>
<div class="y6"></div>
<div class="y7"></div>
<div class="y8"></div>
<div class="y9"></div>
<div class="x0"></div>
<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
<div class="x4"></div>
<div class="x5"></div>
<div class="x6"></div>
<div class="x7"></div>
<div class="x8"></div>
</div>
</div>
</div>
</div>
Raw
Spinning-3d-sphere.markdown

Spinning 3d sphere

A spinning and bouncing sphere made with just HTML and CSS3. The sphere consists of a bunch of DIV elements with rounded corners, borders and a box shadow.

A Pen by Michael Beckius on CodePen.

License.

Raw
style.css
/* define the animations */
@keyframes bounce {
0% { transform: translateY(0px); }
100% { transform: translateY(100px); }
}
@keyframes spin-x {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
@keyframes spin-y {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
@keyframes spin-z {
from { transform: rotateZ(0); }
to { transform: rotateZ(360deg); }
}
body {
background: #000;
margin-top: 10px;
overflow:hidden;
perspective: 800px;
perspective-origin: 50% 100px;
}
/* one wrapper for each axis */
.axis-x, .axis-y, .axis-z {
position: relative;
margin: 0 auto;
width: 200px;
transform-style: preserve-3d;
transform-origin: 100px 100px 0px;
}
/* apply the animations */
.bounce {
animation: bounce .5s infinite ease-in;
animation-direction: alternate;
}
.axis-x {
animation: spin-x 6.593s infinite linear;
}
.axis-y {
animation: spin-y 8.137s infinite linear;
}
.axis-z {
animation: spin-z 9.071s infinite linear;
}
.axis-z div {
border:1px solid #00f;
position:absolute;
border-radius:100px;
transform-origin: center center;
box-shadow: inset 0 0 20px 0px rgba(0,0,255,.5);
}
.y0,.y1,.y2,.y3,.y4,.y5,.y6,.y7,.y8,.y9 {
width:200px;
height:200px;
}
.y0 {
transform:rotateY(0deg);
}
.y1 {
transform:rotateY(18deg);
}
.y2 {
transform:rotateY(36deg);
}
.y3 {
transform:rotateY(54deg);
}
.y4 {
transform:rotateY(72deg);
}
.y5 {
transform:rotateY(90deg);
}
.y6 {
transform:rotateY(108deg);
}
.y7 {
transform:rotateY(126deg);
}
.y8 {
transform:rotateY(144deg);
}
.y9 {
transform:rotateY(162deg);
}
.x0 {
transform:rotateX(90deg) translateZ(-90px);
width:92px;
height:92px;
margin:54px;
}
.x1 {
transform:rotateX(90deg) translateZ(-75px);
width:132px;
height:132px;
margin:34px;
}
.x2 {
transform:rotateX(90deg) translateZ(-55px);
width:166px;
height:166px;
margin:17px;
}
.x3 {
transform:rotateX(90deg) translateZ(-30px);
width:188px;
height:188px;
margin:6px;
}
.x4 {
transform:rotateX(90deg) translateZ(0px);
width:200px;
height:200px;
margin:0px;
}
.x5 {
transform:rotateX(90deg) translateZ(30px);
width:188px;
height:188px;
margin:6px;
}
.x6 {
transform:rotateX(90deg) translateZ(55px);
width:166px;
height:166px;
margin:17px;
}
.x7 {
transform:rotateX(90deg) translateZ(75px);
width:132px;
height:132px;
margin:34px;
}
.x8 {
transform:rotateX(90deg) translateZ(90px);
width:92px;
height:92px;
margin:54px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment