Skip to content

Instantly share code, notes, and snippets.

@Hi-TechParks

Hi-TechParks/flip-box.css

Created September 26, 2018 05:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Hi-TechParks/187a9062b75e09a556894422fa7141e3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Hi-TechParks/187a9062b75e09a556894422fa7141e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flip-box.css
/*** Common Styles ***/
.single-flip-box .box-back-side, .single-flip-box .box-front-side, .single-flip-box .flank{
padding:15px;
box-sizing:border-box;
box-shadow: 0px 0px 5px 0px #333;
overflow: hidden;
border-radius:0px;
}
.single-flip-box h4{
margin:0px;
padding: 5px 0;
color: #333;
font-family: Open Sans Condensed;
font-size: 18px;
font-weight:bold;
text-align:center;
}
.single-flip-box p{
margin:0px;
padding: 5px 0;
color: #333;
line-height: 25px;
font-size: 16px;
text-align: center;
font-family: Raleway;
}
.single-flip-box a{
background:#934d1a;
color:#fff;
font-size:16px;
padding:5px 10px;
cursor:pointer;
border:1px solid #934d1a;
border-radius:0px;
text-decoration:none;
text-align:center;
}
.flip-box-icon{
margin:10px auto;
height:40px;
width:40px;
background:#934d1a;
border-radius:25px;
}
.flip-box-icon i{
text-align:center;
font-size:25px;
line-height:40px;
color:#fff;
display:block;
}
/*** Common Styles ***/
/*** Classic Right Flip Styles ***/
.flip-boxes-style-classic-right {
clear:both;
height:auto;
justify-content: center;
}
.flip-boxes-style-classic-right .single-flip-box {
display: flex;
align-content: stretch;
min-height: 100px;
height:auto;
flex-wrap: wrap;
position: relative;
border: 10px solid transparent;
padding: 0;
border-top: 0;
}
.flip-boxes-style-classic-right .single-flip-box:hover .box-back-side {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
z-index: 10;
}
.flip-boxes-style-classic-right .single-flip-box:hover .box-front-side {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
z-index: -1;
}
.flip-boxes-style-classic-right .single-flip-box .box-back-side, .flip-boxes-style-classic-right .single-flip-box .box-front-side {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-perspective: 100px; /* Safari 4-8 */
-webkit-perspective-origin: left; /* Safari 4-8 */
perspective: 100px;
perspective-origin: left;
}
.flip-boxes-style-classic-right .single-flip-box .box-back-side {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-boxes-style-classic-right .single-flip-box .box-front-side {
z-index: 10;
}
.flip-boxes-style-classic-right .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*** Classic Right Flip Styles ***/
/*** Classic Up Flip Styles ***/
.flip-boxes-style-classic-up {
clear:both;
height:auto;
justify-content: center;
}
.flip-boxes-style-classic-up .single-flip-box {
display: flex;
align-content: stretch;
min-height: 100px;
height:auto;
flex-wrap: wrap;
position: relative;
border: 10px solid transparent;
padding: 0;
border-top: 0;
}
.flip-boxes-style-classic-up .single-flip-box:hover .box-back-side {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
z-index: 10;
}
.flip-boxes-style-classic-up .single-flip-box:hover .box-front-side {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
z-index: -1;
}
.flip-boxes-style-classic-up .single-flip-box .box-back-side, .flip-boxes-style-classic-up .single-flip-box .box-front-side {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-perspective: 100px; /* Safari 4-8 */
-webkit-perspective-origin: left; /* Safari 4-8 */
perspective: 100px;
perspective-origin: left;
}
.flip-boxes-style-classic-up .single-flip-box .box-back-side {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
}
.flip-boxes-style-classic-up .single-flip-box .box-front-side {
z-index: 10;
}
.flip-boxes-style-classic-up .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*** Classic Up Flip Styles ***/
/*** shake Right Flip Styles ***/
.flip-boxes-style-shake-right {
clear:both;
height:auto;
justify-content: center;
}
.flip-boxes-style-shake-right .single-flip-box {
display: flex;
align-content: stretch;
min-height: 100px;
height:auto;
flex-wrap: wrap;
position: relative;
border: 10px solid transparent;
padding: 0;
border-top: 0;
}
.flip-boxes-style-shake-right .single-flip-box:hover .box-back-side {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
z-index: 10;
}
.flip-boxes-style-shake-right .single-flip-box:hover .box-front-side {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
z-index: -1;
}
.flip-boxes-style-shake-right .single-flip-box .box-back-side, .flip-boxes-style-shake-right .single-flip-box .box-front-side {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
-moz-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
-o-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035); /* easeInOutExpo */
-webkit-perspective: 100px; /* Safari 4-8 */
-webkit-perspective-origin: left; /* Safari 4-8 */
perspective: 100px;
perspective-origin: left;
}
.flip-boxes-style-shake-right .single-flip-box .box-back-side {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-boxes-style-shake-right .single-flip-box .box-front-side {
z-index: 10;
}
.flip-boxes-style-shake-right .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*** shake Right Flip Styles ***/
/*** shake Up Flip Styles ***/
.flip-boxes-style-shake-up {
clear:both;
height:auto;
justify-content: center;
}
.flip-boxes-style-shake-up .single-flip-box {
display: flex;
align-content: stretch;
min-height: 100px;
height:auto;
flex-wrap: wrap;
position: relative;
border: 10px solid transparent;
padding: 0;
border-top: 0;
}
.flip-boxes-style-shake-up .single-flip-box:hover .box-back-side {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
z-index: 10;
}
.flip-boxes-style-shake-up .single-flip-box:hover .box-front-side {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
z-index: -1;
}
.flip-boxes-style-shake-up .single-flip-box .box-back-side, .flip-boxes-style-shake-up .single-flip-box .box-front-side {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
-moz-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
-o-transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035);
transition: all 500ms cubic-bezier(0.950, 0.050, 0.795, 0.035); /* easeInOutExpo */
-webkit-perspective: 100px; /* Safari 4-8 */
-webkit-perspective-origin: left; /* Safari 4-8 */
perspective: 100px;
perspective-origin: left;
}
.flip-boxes-style-shake-up .single-flip-box .box-back-side {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
}
.flip-boxes-style-shake-up .single-flip-box .box-front-side {
z-index: 10;
}
.flip-boxes-style-shake-up .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*** shake Up Flip Styles ***/
/*** Elastic Up Flip Styles ***/
.flip-boxes-style-elastic-up {
clear:both;
height:auto;
justify-content: center;
}
.flip-boxes-style-elastic-up .single-flip-box {
display: flex;
align-content: stretch;
min-height: 100px;
flex-wrap: wrap;
position: relative;
border: 10px solid transparent;
padding: 0;
border-top: 0;
}
.flip-boxes-style-elastic-up .single-flip-box:hover .box-back-side {
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
z-index: 10;
}
.flip-boxes-style-elastic-up .single-flip-box:hover .box-front-side {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
z-index: -1;
}
.flip-boxes-style-elastic-up .single-flip-box .box-back-side, .flip-boxes-style-elastic-up .single-flip-box .box-front-side {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
-webkit-transition: all 1s cubic-bezier(0.5, 1, 0.5, 1);
-moz-transition: all 1s cubic-bezier(0.5, 1, 0.5, 1);
transition: all 1s cubic-bezier(0.5, 1.3, 0.5, 1.3);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-boxes-style-elastic-up .single-flip-box .box-back-side {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
}
.flip-boxes-style-elastic-up .single-flip-box .box-front-side {
z-index: 10;
}
.flip-boxes-style-elastic-up .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*** Elastic Up Flip Styles ***/
/*** Elastic Right Flip Styles ***/
.flip-boxes-style-elastic-right {
clear:both;
height:auto;
justify-content: center;
}
.flip-boxes-style-elastic-right .single-flip-box {
display: flex;
align-content: stretch;
min-height: 100px;
flex-wrap: wrap;
position: relative;
border: 10px solid transparent;
padding: 0;
border-top: 0;
}
.flip-boxes-style-elastic-right .single-flip-box:hover .box-back-side {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
z-index: 10;
}
.flip-boxes-style-elastic-right .single-flip-box:hover .box-front-side {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
z-index: -1;
}
.flip-boxes-style-elastic-right .single-flip-box .box-back-side, .flip-boxes-style-elastic-right .single-flip-box .box-front-side {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
-webkit-transition: all 1s cubic-bezier(0.5, 1, 0.5, 1);
-moz-transition: all 1s cubic-bezier(0.5, 1, 0.5, 1);
transition: all 1s cubic-bezier(0.5, 1.3, 0.5, 1.3);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-boxes-style-elastic-right .single-flip-box .box-back-side {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.flip-boxes-style-elastic-right .single-flip-box .box-front-side {
z-index: 10;
}
.flip-boxes-style-elastic-right .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*** Elastic Right Flip Styles ***/
/*** Rolling Flip Styles ***/
.flip-boxes-style-rolling {
clear:both;
height:auto;
justify-content: center;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.flip-boxes-style-rolling .single-flip-box {
display: flex;
align-content: stretch;
min-height: 100px;
flex-wrap: wrap;
position: relative;
border: 10px solid transparent;
padding: 0;
border-top: 0;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-webkit-transform-origin: right center;
-moz-transform-style: preserve-3d;
-moz-transition: -webkit-transform 1s;
-moz-transform-origin: right center;
transform-style: preserve-3d;
transition: -webkit-transform 1s;
transform-origin: right center;
}
.flip-boxes-style-rolling .single-flip-box:hover .box-back-side {
z-index: 10;
-webkit-transform: translateX(0%) rotateY(0deg);
-moz-transform: translateX(0%) rotateY(0deg);
transform: translateX(0%) rotateY(0deg);
}
.flip-boxes-style-rolling .single-flip-box:hover .box-front-side {
z-index: -1;
-webkit-transform: translateX(-100%) rotateY(180deg);
-moz-transform: translateX(-100%) rotateY(180deg);
transform: translateX(-100%) rotateY(180deg);
}
.flip-boxes-style-rolling .single-flip-box .box-back-side, .flip-boxes-style-rolling .single-flip-box .box-front-side {
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
transition: all 1s ;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-boxes-style-rolling .single-flip-box .box-back-side {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: -1;
-webkit-transform: translateX(0%) rotateY(180deg);
-moz-transform: translateX(0%) rotateY(180deg);
transform: translateX(0%) rotateY(180deg);
}
.flip-boxes-style-rolling .single-flip-box .box-front-side {
z-index: 10;
}
.flip-boxes-style-rolling .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: left;
-webkit-transition: 1s;
-webkit-transition-delay: 0.4s;
-moz-transition: 1s;
-moz-transition-delay: 0.4s;
transition: 1s;
transition-delay: 0.4s;
}
.flip-boxes-style-rolling .single-flip-box .box-back-side .flip-box-body {
display: flex;
justify-content: flex-start;
align-items: center;
-webkit-transition: 1s;
-webkit-transition-delay: 0.4s;
-moz-transition: 1s;
-moz-transition-delay: 0.4s;
transition: 1s;
transition-delay: 0.4s;
}
/*** Rolling Flip Styles ***/
/*** 3D Flip Styles ***/
.flip-boxes-style-3D {
clear:both;
height:auto;
justify-content: center;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.flip-boxes-style-3D .single-flip-box .object, .flip-boxes-style-3D .single-flip-box .box-front-side, .flip-boxes-style-3D .single-flip-box .box-back-side {
width: 100%;
height: 100%;
}
.flip-boxes-style-3D .slice, .flip-boxes-style-3D .single-flip-box .box-front-side, .flip-boxes-style-3D .single-flip-box .box-back-side, .flip-boxes-style-3D .single-flip-box .flank {
display: block;
overflow: hidden;
position: absolute;
}
.flip-boxes-style-3D .single-flip-box {
float: left;
display: block;
position: relative;
z-index: 2;
width: 300px;
height: 200px;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
display: flex;
align-content: stretch;
min-height: 100px;
flex-wrap: wrap;
margin:8px;
}
.flip-boxes-style-3D .single-flip-box .object {
position: absolute;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-75px);
-moz-transform: translateZ(-75px);
-ms-transform: translateZ(-75px);
-o-transform: translateZ(-75px);
transform: translateZ(-75px);
}
.flip-boxes-style-3D .single-flip-box .object:hover, .flip-boxes-style-3D .single-flip-box .object:focus {
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transform: translateZ(-75px) rotateY(180deg);
-moz-transform: translateZ(-75px) rotateY(180deg);
-ms-transform: translateZ(-75px) rotateY(180deg);
-o-transform: translateZ(-75px) rotateY(180deg);
transform: translateZ(-75px) rotateY(180deg);
}
.flip-boxes-style-3D .single-flip-box .box-front-side {
z-index: 1;
background-color: #fff;
-webkit-transform: rotateY(0deg) translateZ(75px);
-moz-transform: rotateY(0deg) translateZ(75px);
-ms-transform: rotateY(0deg) translateZ(75px);
-o-transform: rotateY(0deg) translateZ(75px);
transform: rotateY(0deg) translateZ(75px);
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
}
.flip-boxes-style-3D .single-flip-box .box-back-side {
z-index: 0;
background-color: #fff;
-webkit-transform: rotateY(180deg) translateZ(75px);
-moz-transform: rotateY(180deg) translateZ(75px);
-ms-transform: rotateY(180deg) translateZ(75px);
-o-transform: rotateY(180deg) translateZ(75px);
transform: rotateY(180deg) translateZ(75px);
display: flex;
justify-content: center;
align-content: center;
flex: 0 0 100%;
}
.flip-boxes-style-3D .single-flip-box .flank {
width: 150px;
height: 200px;
left: 75px;
background-color: #fff;
-webkit-transform: rotateY(-90deg) translateZ(150px);
-moz-transform: rotateY(-90deg) translateZ(150px);
-ms-transform: rotateY(-90deg) translateZ(150px);
-o-transform: rotateY(-90deg) translateZ(150px);
transform: rotateY(-90deg) translateZ(150px);
}
.flip-boxes-style-3D .single-flip-box.flip-up .object:hover, .flip-boxes-style-3D .single-flip-box.flip-up .object:focus {
-webkit-transform: translateZ(-75px) rotateX(180deg);
-moz-transform: translateZ(-75px) rotateX(180deg);
-ms-transform: translateZ(-75px) rotateX(180deg);
-o-transform: translateZ(-75px) rotateX(180deg);
transform: translateZ(-75px) rotateX(180deg);
}
.flip-boxes-style-3D .single-flip-box.flip-up .box-back-side {
-webkit-transform: rotateX(180deg) translateZ(75px);
-moz-transform: rotateX(180deg) translateZ(75px);
-ms-transform: rotateX(180deg) translateZ(75px);
-o-transform: rotateX(180deg) translateZ(75px);
transform: rotateX(180deg) translateZ(75px);
}
.flip-boxes-style-3D .single-flip-box.flip-up .flank {
width: 300px;
height: 150px;
left: 0;
top: 25px;
-webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
-o-transform: rotateX(-90deg) translateZ(100px);
transform: rotateX(-90deg) translateZ(100px);
}
.flip-boxes-style-3D .single-flip-box.flip-right .box-front-side {
background-color: #fff;
}
.flip-boxes-style-3D .single-flip-box.flip-right .box-back-side {
background-color: #fff;
}
.flip-boxes-style-3D .single-flip-box.flip-right .flank {
background-color: #fff;
}
.flip-boxes-style-3D .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.flip-boxes-style-3D .single-flip-box .flip-box-header {
display: flex;
justify-content: center;
align-items: flex-start;
}
.flip-boxes-style-3D .single-flip-box .flip-box-footer {
display: flex;
justify-content: center;
align-items: flex-end;
}
/*** 3D Flip Styles ***/
/*** Jump Down Flip Styles ***/
.flip-boxes-style-jump-down {
clear:both;
height:auto;
justify-content: center;
}
.flip-boxes-style-jump-down .single-flip-box {
display: flex;
align-content: stretch;
flex-wrap: wrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
color: #fff;
border-radius: 15px;
display: block;
text-align: center;
-webkit-transition: box-shadow .4s .45s,
-webkit-transform 1s ease-in-out;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 150px;
-webkit-transform-origin: bottom;
-moz-transition: box-shadow .4s .45s,
-moz-transform 1s ease-in-out;
-moz-transform-style: preserve-3d;
-moz-perspective: 150px;
-moz-transform-origin: bottom;
transition: box-shadow .4s .45s,
transform 1s ease-in-out;
transform-style: preserve-3d;
perspective: 150px;
transform-origin: bottom;
}
.flip-boxes-style-jump-down .box-front-side, .flip-boxes-style-jump-down .box-back-side {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
padding: 1em;
margin: 1em;
z-index: 2;
-webkit-perspective: 150px;
-webkit-transition: opacity .25s .25s linear;
-moz-perspective: 150px;
-moz-transition: opacity .25s .25s linear;
perspective: 150px;
transition: opacity .25s .25s linear;
overflow: hidden;
}
.flip-boxes-style-jump-down .single-flip-box a {
display: inline-block;
background: #1aa7af;
color: #fff;
border-radius: .25em;
padding: .25em .5em;
text-decoration: none;
}
.flip-boxes-style-jump-down .box-back-side {
-webkit-transform: rotateX(180deg);
-webkit-transition: color .2s .5s, background .2s .5s ease-in-out, opacity .25s .4s linear;
-moz-transform: rotateX(180deg);
-moz-transition: color .2s .5s, background .2s .5s ease-in-out, opacity .25s .4s linear;
transform: rotateX(180deg);
transition: color .2s .5s, background .2s .5s ease-in-out, opacity .25s .4s linear;
z-index: 1;
opacity: 0;
}
.flip-boxes-style-jump-down .single-flip-box:hover {
-webkit-transform: rotateX(180deg) translateY(15em) translateZ(40px);
-moz-transform: rotateX(180deg) translateY(15em) translateZ(40px);
transform: rotateX(180deg) translateY(15em) translateZ(40px);
}
.flip-boxes-style-jump-down .single-flip-box:hover .box-front-side {
opacity: 0;
}
.flip-boxes-style-jump-down .single-flip-box:hover .box-back-side {
background: #fff;
color: #222;
z-index: 3;
opacity: 1;
}
.flip-boxes-style-jump-down .single-flip-box .flip-box-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/*** Jump Down Flip Styles ***/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment