کارت برگردان با CSS3

این رو ببینید:

جلو
پشت

خوبه نه؟
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
transform: rotateY(180deg);
}

این کلاس، transform، همه کار رو میکنه. روی محور Y یک چرخش ۱۸۰ درجه ایجاد می‌کنه.

این کد HTML هست:

جلو
پشت


این هم css style:

.flip-container
{
moz-perspective: 1000;
moz-transform: perspective(1000px);
moz-transform-style: preserve-3d;
ms-perspective: 1000;
ms-transform: perspective(1000px);
ms-transform-style: preserve-3d;
perspective: 1000;
webkit-perspective: 1000;
}
.flip-container:hover .back, .flip-container.hover .back
{
moz-transform: rotateY(0deg);
ms-transform: rotateY(0deg);
o-transform: rotateY(0deg);
transform: rotateY(0deg);
webkit-transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front
{
moz-transform: rotateY(180deg);
o-transform: rotateY(180deg);
transform: rotateY(180deg);
webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back
{
height: 427px;
width: 320px;
}
.flipper
{
moz-transform: perspective(1000px);
moz-transform-style: preserve-3d;
moz-transition: 0.6s;
ms-transform-style: preserve-3d;
ms-transition: 0.6s;
position: relative;
transform-style: preserve-3d;
transition: 0.6s;
webkit-transform-style: preserve-3d;
webkit-transition: 0.6s;
}
.front, .back
{
backface-visibility: hidden;
border: 1px solid #ccc;
left: 0;
moz-backface-visibility: hidden;
moz-transform-style: preserve-3d;
moz-transition: 0.6s;
ms-backface-visibility: hidden;
ms-transform-style: preserve-3d;
ms-transition: 0.6s;
o-transform-style: preserve-3d;
o-transition: 0.6s;
position: absolute;
top: 0;
transform-style: preserve-3d;
transition: 0.6s;
webkit-backface-visibility: hidden;
webkit-transform-style: preserve-3d;
webkit-transition: 0.6s;
}
.front
{
background: lightgreen;
ms-transform: rotateY(0deg);
webkit-transform: rotateY(0deg);
z-index: 2;
}
.back
{
background: lightblue;
moz-transform: rotateY(-180deg);
ms-transform: rotateY(-180deg);
o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
webkit-transform: rotateY(-180deg);
}

اصل مطلب رو میتونید اینجا بخونید.

اگه بخواید با کلیک کردن به جای hover این برگردون رو انجام بدید، باید کلاس :hover رو به عنوان یک کلاس جدا تعریف کنید:

.hovered
{
moz-transform: rotateY(180deg);
o-transform: rotateY(180deg);
transform: rotateY(180deg);
webkit-transform: rotateY(180deg);
}

و برای دکمه یا چیز دیگه‌ای که قرار روش کلیک بشه تا این برگردون انجام بشه، این اسکریپت رو براش تعریف کنید:

$(".clickme").on("click", function (event,ui) {
event.stopPropagation();
$(".flip-container.hover .flipper, .flip-container .flipper").toggleClass("hovered");
});

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.