3d-Ball Animation

3D Animation--Ball

Source:

<! DOCTYPE html>

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

<meta charset= "Utf-8" >

<TITLE>CSS3 making 3D Rotating spheres </title>

<meta name= "keywords" content= "css3,css3 rotation, CSS3 animation, Css3d,transform,3d,keyframes, Blue Dream, fantasy deified" >

<meta name= "description" content= "CSS3 make 3D rotating Sphere" >

<style>

* {

margin:0; padding:0;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-ms-box-sizing:border-box;

-o-box-sizing:border-box;

Box-sizing:border-box;

/*

Syntax Structure & Description:

Box-sizing:content-box | Border-box

Content-box: This property behaves as a box model in standard mode (when we set the width and height of an element, it does not include border and padding. Example: width:100px; border-width:10px; The actual width of the element is 220px;)

Border-box: This property behaves as a box model in quirks mode (as opposed to Content-box, its width contains border and padding. Example: width:100px; border-width:10px; At this time the border equivalent to the padding, the actual width of the element is still 200px;)

*/

}

Body {

Background: #333;

}

. Wrap {

margin:150px Auto;

position:relative;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

-ms-box-sizing:border-box;

Box-sizing:border-box;

}

. Wrap,. x,. Y,. z {

width:500px;

height:500px;

border-radius:50%;

}

. x1,. x2,. Y,. Y1,. Y2,. Z,. Z1,. Z2,. Xinner,. Yinner,. Zinner {

Position:absolute;

}

. x1,.x2,.y1,.y2,.z1,.z2 {

width:87.5%;

height:87.5%;

border-radius:50%;

}

. x {

position:relative;

border:1px solid #FF0099;

-webkit-transform-style:preserve-3d;

-moz-transform-style:preserve-3d;

-ms-transform-style:preserve-3d;

transform-style:preserve-3d;

-webkit-animation:mymove 10s linear infinite;

-moz-animation:mymove 10s linear infinite;

-ms-animation:mymove 10s linear infinite;

Animation:mymove 10s linear infinite;

}

. y {

top:0; left:0;

border:2px solid #0099FF;

-webkit-transform:rotatex (90DEG);

-moz-transform:rotatex (90DEG);

-ms-transform:rotatex (90DEG);

Transform:rotatex (90DEG);

}

. z {

top:0; left:0;

border:1px solid #FFCC33;

-webkit-transform:rotatey (90DEG);

-moz-transform:rotatey (90DEG);

-ms-transform:rotatey (90DEG);

Transform:rotatey (90DEG);

}

. x1 {

top:6.25%; left:6.25%;

border:1px solid #FF0099;

-webkit-transform:translatez (50px);

-moz-transform:translatez (50px);

-ms-transform:translatez (50px);

Transform:translatez (50px);

}

. x2 {

top:6.25%; left:6.25%;

border:1px solid #FF0099;

-webkit-transform:rotatex (180deg) Translatez (50px);

-moz-transform:rotatex (180deg) Translatez (50px);

-ms-transform:rotatex (180deg) Translatez (50px);

Transform:rotatex (180deg) Translatez (50px);

}

. y1 {

top:6.25%; left:6.25%;

border:1px solid #0099FF;

-webkit-transform:rotatex (90deg) Translatez (50px);

-moz-transform:rotatex (90deg) Translatez (50px);

-ms-transform:rotatex (90deg) Translatez (50px);

Transform:rotatex (90deg) Translatez (50px);

}

. y2 {

top:6.25%; left:6.25%;

border:1px solid #0099FF;

-webkit-transform:rotatex (270deg) Translatez (50px);

-moz-transform:rotatex (270deg) Translatez (50px);

-ms-transform:rotatex (270deg) Translatez (50px);

Transform:rotatex (270deg) Translatez (50px);

}

. z1 {

top:6.25%; left:6.25%;

border:1px solid #FFCC33;

-webkit-transform:rotatey (90deg) Translatez (50px);

-moz-transform:rotatey (90deg) Translatez (50px);

-ms-transform:rotatey (90deg) Translatez (50px);

Transform:rotatey (90deg) Translatez (50px);

}

. z2 {

top:6.25%; left:6.25%;

border:1px solid #FFCC33;

-webkit-transform:rotatey (270deg) Translatez (50px);

-moz-transform:rotatey (270deg) Translatez (50px);

-ms-transform:rotatey (270deg) Translatez (50px);

Transform:rotatey (270deg) Translatez (50px);

}

. xinner {

border:1px solid #FF0099;

width:100%;

top:50%;

}

. yinner {

height:100%;

left:50%;

border:1px solid #0099FF;

-webkit-transform:rotatex (90DEG);

-moz-transform:rotatex (90DEG);

-ms-transform:rotatex (90DEG);

Transform:rotatex (90DEG);

}

. Zinner {

height:100%;

left:50%;

border:1px solid #FFCC33;

-webkit-transform:rotatey (90DEG);

-moz-transform:rotatey (90DEG);

-ms-transform:rotatey (90DEG);

Transform:rotatey (90DEG);

}

@-webkit-keyframes Mymove

{

100% {-webkit-transform:rotatex (360deg) Rotatey (180DEG)}

}

@-moz-keyframes Mymove

{

100% {-moz-transform:rotatex (360deg) Rotatey (360DEG)}

}

@-ms-keyframes Mymove

{

100% {-ms-transform:rotatex (360deg) Rotatey (360DEG)}

}

@keyframes Mymove

{

100% {Transform:rotatex (360deg) Rotatey (360DEG)}

}

#info {text-align:center; font-family: "Microsoft Yahei"; line-height:24px; color: #555; border-top:1px #222 solid; padding:25px 0;}

#info. title{font-size:20px;}

#info. author{font-size:14px;}

#info a{text-decoration:none; color: #555;}

</style>

<body>

<div class= "Wrap" >

<div class= "inner" ></div>

<div class= "x" >

<div class= "x1" ></div>

<div class= "X2" ></div>

<div class= "Xinner" ></div>

<div class= "Y" ></div>

<div class= "Y1" ></div>

<div class= "y2" ></div>

<div class= "Yinner" ></div>

<div class= "Z" ></div>

<div class= "Z1" ></div>

<div class= "Z2" ></div>

<div class= "Zinner" ></div>

</div>

</div>

<!--<div id= "Info" >

<p class= "title" >css3 making 3D rotating spheres </p>

<p class= "Author" >by www.bluesdream.com <script src= "./css3-3d rotate Sphere _files/stat.php" language= "JavaScript" ></script><script src= "./css3-3d rotating Sphere _files/core.php" charset= "Utf-8" type= "Text/javascript" ></ Script><a href= "http://www.cnzz.com/stat/website.php?web_id=1734797" target= "_blank" title= "webmaster Statistics" > Webmaster Statistics </a></p>

</div>-->

</body>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/8F/wKioL1YBEp_CogBpAAHe5rGfnZc268.jpg "title=" New-blog-255020147-black.png "alt=" Wkiol1ybep_cogbpaahe5rgfnzc268.jpg "/>

This article is from the "Wennuanyiran" blog, make sure to keep this source http://dingzhaoqiang.blog.51cto.com/5601059/1697146

3d-Ball Animation