Skip to content

Instantly share code, notes, and snippets.

@batman

batman/ratingstars.html

Last active March 16, 2017 13:41
Show Gist options
  • Save batman/3be56c074bd0bfafd8f863e3820c4888 to your computer and use it in GitHub Desktop.
Save batman/3be56c074bd0bfafd8f863e3820c4888 to your computer and use it in GitHub Desktop.
Download ZIP
a 3D rotating Container via CSS3
Raw
ratingstars.html
<!DOCTYPE html>
<html>
<head>
<style>
.star {
width: 50px;
height: 50px;
display: inline-block;
cursor: pointer;
}
.star div {
width: 50px;
height: 50px;
display: block;
background-color: #ccc;
animation-name: spin2;
animation-timing-function: ease;
animation-duration: 0.3s;
-webkit-transform: rotateY(0deg); /* Safari */
transform: rotateY(0deg); /* Standard syntax */
}
.star:hover div {
animation-name: spin1;
animation-duration: 0.3s;
animation-timing-function: ease;
-webkit-transform: rotateY(180deg); /* Safari */
transform: rotateY(180deg); /* Standard syntax */
background-color: #F3B607;
}
@keyframes spin1 {
0% {
-webkit-transform: rotateY(0deg); /* Safari */
transform: rotateY(0deg); /* Standard syntax */
background-color: #ccc;
}
100% {
-webkit-transform: rotateY(180deg); /* Safari */
transform: rotateY(180deg); /* Standard syntax */
background-color: #F3B607;
}
}
@keyframes spin2 {
0% {
-webkit-transform: rotateY(180deg); /* Safari */
transform: rotateY(180deg); /* Standard syntax */
background-color: #F3B607;
}
100% {
-webkit-transform: rotateY(0deg); /* Safari */
transform: rotateY(0deg); /* Standard syntax */
background-color: #ccc;
}
}
</style>
</head>
<body>
<div class="star"><div></div></div>
<div class="star"><div></div></div>
<div class="star"><div></div></div>
<div class="star"><div></div></div>
<div class="star"><div></div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment