You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

71 lines
1.6 KiB

/*******************************
Shape
*******************************/
.ui.shape {
position: relative;
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
}
.ui.shape .sides {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ui.shape .side {
opacity: 1;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
/*---------------
States
----------------*/
/* Standard */
.ui.shape .side {
display: none;
}
/* Animating */
.ui.shape.animating .sides {
position: absolute;
}
.ui.shape .animating.side {
position: absolute;
width: 100%;
top: 0px;
left: 0px;
z-index: 100;
}
.ui.shape .hidden.side {
opacity: 0.7;
}
/* css animation */
.ui.shape.css {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.ui.shape.css .sides {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.ui.shape.css .side {
-webkit-transition: opacity 0.6s ease-in-out;
-moz-transition: opacity 0.6s ease-in-out;
-o-transition: opacity 0.6s ease-in-out;
-ms-transition: opacity 0.6s ease-in-out;
transition: opacity 0.6s ease-in-out;
}
/* Active */
.ui.shape .active.side {
display: block;
}