@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
body {
font-family: "Open Sans";
background: #7f7fd5; /* fallback for old browsers */
background: linear-gradient(227deg, #7f7fd5, #86a8e7, #91eae4);
background-size: 600% 600%;
margin: 20px auto;
}
h1 {
text-align: center;
color: #deffed;
font-size: 60px;
font-weight: 300;
margin-bottom: 5px;
}
hr {
width: 20%;
border: 1px solid #fff
}
#cube {
width: 112px;
height: 112px;
top: 50px;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
-moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
margin: auto;
position: relative;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-animation: cubeRotation 5s infinite; /* Safari 4.0 - 8.0 */
animation: cubeRotation 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes cubeRotation {
0% {
-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
50% {
-webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);
}
100% {
-webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);
}
}
/* Standard syntax */
@keyframes cubeRotation {
0% {
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
50% {
transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);
}
100% {
transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);
}
}
#cube > div {
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
width: 112px;
height: 112px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotatex(90deg) translateX(0px) translateY(0px)
translateZ(56px);
-webkit-transform: rotatex(90deg) translateX(0px) translateY(0px)
translateZ(56px);
background: #d1913c; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#ffd194,
#d1913c
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#ffd194,
#d1913c
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateY(-90deg) translateX(0px) translateY(0px)
translateZ(56px);
-webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px)
translateZ(56px);
background: #7b4397; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#dc2430,
#7b4397
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#dc2430,
#7b4397
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: translateX(0px) translateY(0px) translateZ(56px);
-webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
background: #00bf8f; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#001510,
#00bf8f
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#001510,
#00bf8f
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateY(90deg) translateX(0px) translateY(0px)
translateZ(56px);
-webkit-transform: rotateY(90deg) translateX(0px) translateY(0px)
translateZ(56px);
background: #ffe000; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#799f0c,
#ffe000
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#799f0c,
#ffe000
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateY(180deg) translateX(0px) translateY(0px)
translateZ(56px);
-webkit-transform: rotateY(180deg) translateX(0px) translateY(0px)
translateZ(56px);
background: #43cea2; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#185a9d,
#43cea2
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#185a9d,
#43cea2
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
-moz-transform: rotateX(-90deg) translateX(0px) translateY(0px)
translateZ(56px);
-webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px)
translateZ(56px);
background: #fdfc47; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#24fe41,
#fdfc47
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#24fe41,
#fdfc47
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
/* Animation */
-webkit-animation: BackgroundAnimation 30s ease infinite;
-moz-animation: BackgroundAnimation 30s ease infinite;
animation: BackgroundAnimation 30s ease infinite;
@-webkit-keyframes BackgroundAnimation {
0% {
background-position: 91% 0%;
}
50% {
background-position: 10% 100%;
}
100% {
background-position: 91% 0%;
}
}
@-moz-keyframes BackgroundAnimation {
0% {
background-position: 91% 0%;
}
50% {
background-position: 10% 100%;
}
100% {
background-position: 91% 0%;
}
}
@keyframes BackgroundAnimation {
0% {
background-position: 91% 0%;
}
50% {
background-position: 10% 100%;
}
100% {
background-position: 91% 0%;
}
}
Rotating Cube
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.