A Pen by Hasan Yousef.

CSS-GLASS-ROTATING-GLOBE.markdown

CSS GLASS ROTATING GLOBE

A rotating "Glass like " globe with a Hue changing effect (Works on Chrome and Safari only)

A Pen by Hasan Yousef on CodePen.

License.

index.html

<div class="planet mine left"><p class="shadow"></p></div>

style.css

/**** HUE ROTATION ONLY WORKS IN CHROME AND SAFARI ****/

body {
	background-color: #CCC;
  margin:0; padding:0;
  
}


.planet {
	width:200px;
	height:200px;
	border-radius:200px;
	background-size: 400px;
	background-color:#FFF;
	margin-left:156px;
	margin-top:50px;
	background: url(http://www.sxs-design.com/BVE/ANIM/W1.png);
	box-shadow: inset 8px 8px 30px rgba(255,255,255,0.6);
	-webkit-animation: unrotate 10s infinite linear;
	-moz-animation: unrotate 10s infinite linear;
  	-o-animation: unrotate 10s infinite linear;
}

div.planet:before {
	content:"";
display:block;
	width:200px;
	height:200px;
	border-radius:200px;
	background-size: 400px;
	background-color:#FFF;
	animation: rotate 10s infinite linear;
	-webkit-animation: rotate 10s infinite linear;
	-moz-animation: rotate 10s infinite linear;
  	-o-animation: rotate 10s infinite linear;
	background: url(http://www.sxs-design.com/BVE/ANIM/W1.png);
box-shadow: inset 8px 8px 30px rgba(255,255,255,0.6);
}

div.planet:after {
	position: absolute;
	left:156px;
	top:40px;
	content:"";
	width:200px;
	height:140px;
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%, rgba(255,255,255,0.27) 52%, rgba(255,255,255,0) 53%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(14%,rgba(255,255,255,0)), color-stop(52%,rgba(255,255,255,0.27)), color-stop(53%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(255,255,255,0) 14%,rgba(255,255,255,0.27) 52%,rgba(255,255,255,0) 53%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}





.mine{background: url(http://www.sxs-design.com/BVE/ANIM/W2.png);
box-shadow: 
				inset -19px -19px 70px rgba(0,0,0,0.5),
				inset -5px -5px 18px rgba(0,0,0,0.2);}
				
.shadow {
		position:absolute;
	left:166px;
	top:133px;
	content:"";
	width:180px;
	height:110px;
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%, rgba(0,0,0,0.12) 52%, rgba(0,0,0,0) 53%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(14%,rgba(255,255,255,0)), color-stop(52%,rgba(0,0,0,0.12)), color-stop(53%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(255,255,255,0) 14%,rgba(0,0,0,0.12) 52%,rgba(0,0,0,0) 53%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
p.shadow:before {
		position:absolute;
	left:06px;
	top:106px;
	content:"";
	width:180px;
	height:30px;
background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.25)), color-stop(60%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */


}




@keyframes rotate {
  from {background-position:0 0;
  -webkit-filter: hue-rotate(0deg)}
  to {background-position:400px 0;
  -webkit-filter: hue-rotate(360deg)}
}
@-webkit-keyframes rotate {
  from {background-position:0 0;
  -webkit-filter: hue-rotate(0deg)}
  to {background-position:400px 0;
  -webkit-filter: hue-rotate(360deg)}
}
@-moz-keyframes rotate {
  from {background-position:0 0;}
  to {background-position:400px 0;}
}
@-o-keyframes rotate {
  from {background-position:0 0;}
  to {background-position:400px 0;}
}
@keyframes unrotate {
  from {background-position:400px 0;
    -webkit-filter: hue-rotate(0deg)}
  to {background-position:0 0;
    -webkit-filter: hue-rotate(360deg)}
}
@-webkit-keyframes unrotate {
  from {background-position:400px 0;
    -webkit-filter: hue-rotate(0deg)}
  to {background-position:0 0;
    -webkit-filter: hue-rotate(360deg)}
}
@-moz-keyframes unrotate {
  from {background-position:400px 0;}
  to {background-position:0 0;}
}
@-o-keyframes unrotate {
  from {background-position:400px 0;}
  to {background-position:0 0;}
}