Skip to content

Instantly share code, notes, and snippets.

@hkjpotato

hkjpotato/box rotation directions .markdown

Created August 29, 2015 06:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hkjpotato/ba3935cf146d93a5aa2b to your computer and use it in GitHub Desktop.
Save hkjpotato/ba3935cf146d93a5aa2b to your computer and use it in GitHub Desktop.
Download ZIP
box rotation directions
Raw
index.html
<h1>CSS Smartisian Effect by KJ </h1>
<div class="wrap wrap-defaults">
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
<div class="box box-rotate box-rotate-right">
<div class="front">
front
</div>
<div class="right">
right
</div>
<div class="back">
back
</div>
<div class="left">
left
</div>
</div>
</div>
Raw
style.css
@import "compass/css3";
$boxsize: 100px;
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
/* padding: 100px; */
font-family: Arial, sans-serif;
background: #2985c7;
}
h1 {
color: white;
display: block;
text-align: center;
margin-bottom: 20px;
margin-top: 20px;
}
.wrap {
background: grey;
width:300px;
height:300px;
margin: 0 auto;
}
.wrap:after {
/* content: "";
display: block;
clear: both;*/
}
.box-rotate-wrap {
/* float: left;
margin: 0;*/
/* -webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;*/
}
.box, .box div {
width: $boxsize;
height: $boxsize;
float: left;
}
.box-rotate {
/* position: relative; */
/* -webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
/* -webkit-transform: translate3d(0, 0, -$boxsize/2);
-moz-transform: translate3d(0, 0, -$boxsize/2);
-ms-transform: translate3d(0, 0, -$boxsize/2);
transform: translate3d(0, 0, -$boxsize/2);*/
}
.box-rotate div {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: #fff;
padding: 20px;
}
.box-rotate img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box-rotate .front {
background: #1d365d;
z-index: 2;
-webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
-moz-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
-ms-transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, $boxsize/2);
}
.box-rotate .back {
background: #2f4074;
-webkit-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, $boxsize/2);
-moz-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, $boxsize/2);
-ms-transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, $boxsize/2);
transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, $boxsize/2);
}
.box-rotate .top {
background: purple;
-webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize/2);
-moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize/2);
-ms-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize/2);
transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, $boxsize/2);
}
.box-rotate .bottom {
background: blue;
-webkit-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize/2);
-moz-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize/2);
-ms-transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize/2);
transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, $boxsize/2);
}
.box-rotate .left {
background: #5ea9de;
-webkit-transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
-moz-transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
-ms-transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, $boxsize/2);
}
.box-rotate .right {
background: green;
-webkit-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
-moz-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
-ms-transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, $boxsize/2);
}
.wrap:hover .box-rotate-right{
-webkit-animation: mymove 1s forwards; /* Chrome, Safari, Opera */
animation: mymove 1s forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
//no need
}
/* Standard syntax */
@keyframes mymove {
50% {-webkit-transform: rotate3d(0, 1, 0, 120deg);
-moz-transform:rotate3d(0, 1, 0, 120deg);
-ms-transform:rotate3d(0, 1, 0, 120deg);
transform:rotate3d(0, 1, 0, 120deg);
}
100% {-webkit-transform: rotate3d(0, 1, 0, 90deg);
-moz-transform:rotate3d(0, 1, 0, 90deg);
-ms-transform:rotate3d(0, 1, 0, 90deg);
transform:rotate3d(0, 1, 0, 90deg);
}
}
.wrap .box-rotate-right:nth-child(1) {
-webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
animation-delay:0s;
}
.wrap .box-rotate-right:nth-child(2) {
-webkit-animation-delay: 0.1s; /* Chrome, Safari, Opera */
animation-delay:0.1s;
}
.wrap .box-rotate-right:nth-child(3) {
-webkit-animation-delay: 0.2s; /* Chrome, Safari, Opera */
animation-delay:0.2s;
}
.wrap .box-rotate-right:nth-child(4) {
-webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
animation-delay:0.3s;
}
.wrap .box-rotate-right:nth-child(5) {
-webkit-animation-delay: 0.4s; /* Chrome, Safari, Opera */
animation-delay:0.4s;
}
.wrap .box-rotate-right:nth-child(6) {
-webkit-animation-delay: 0.5s; /* Chrome, Safari, Opera */
animation-delay:0.5s;
}
.wrap .box-rotate-right:nth-child(7) {
-webkit-animation-delay: 0.6s; /* Chrome, Safari, Opera */
animation-delay:0.6s;
}
.wrap .box-rotate-right:nth-child(8) {
-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
animation-delay:0.7s;
}
.wrap .box-rotate-right:nth-child(9) {
-webkit-animation-delay: 0.8s; /* Chrome, Safari, Opera */
animation-delay:0.8s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment