|
Server : Apache/2 System : Linux srv244.medyabim.com 4.18.0-553.89.1.el8_10.x86_64 #1 SMP Mon Dec 8 03:53:08 EST 2025 x86_64 User : lionbursa ( 1773) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/lionbursa/public_html/style/less/less-mobilerepair/shortcodes/ |
Upload File : |
/*
* Shortcode: Flip Box
* -----------------------------------------------
*/
.card {
float: left;
min-height: 300px;
padding-bottom: 25%;
position: relative;
text-align: center;
width: 100%;
&:nth-child(1) {
margin-left: -3px;
margin-right: 1px;
}
&:nth-child(1),.card:nth-child(3) {
margin-right: 1px;
}
.card__front,.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__back {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card__text {
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
line-height: 20px;
}
&.effect__hover {
&:hover {
.card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
}
&.effect__click {
&.flipped {
.card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
}
&.effect__random {
&.flipped {
.card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
}
}
/*
* Responsive : Flip Box
* -----------------------------------------------
*/
@media only screen and (max-width: 767px) {
.card {
margin-bottom: 30px;
min-height: 489px;
}
}
@media only screen and (min-width: 501px) and (max-width: 600px) {
.card {
margin-bottom: 30px;
min-height: 400px;
}
}
@media only screen and (min-width: 450px) and (max-width: 500px) {
.card {
margin-bottom: 30px;
min-height: 350px;
}
}
@media only screen and (min-width: 320px) and (max-width: 449px) {
.card {
margin-bottom: 30px;
min-height: 300px;
}
}