آموزش ساخت برگه دوطرفه (Flipping Animation)

با سلام خدمت تمامی دوستان گرامی . امروز براتون یک آموزش بسیار بسیار کاربردی رو فراهم کردم … امیدوارم ازش استفاده کافی رو ببرید . چیزی که براتون آماده کردم ساختن یک برگه دو طرفه هستش که کاربر با هاور کردن (بردن موس به روی آن) سمت دیگر آن نمایش داده شود یا به اصطلاح به آن “Flipping Animation” میگن . همونطور ک میبینین در لوگوی سایت هم که در هدر قرار دارد ما از این تکنیک استفاده کردیم … نمیخوام زیاد وارد جزئیاتش بشم برای همین سریع میرم سراغ اصل مطلب و کدهای اصلی که دو دسته هستش … یکی HTML و یکی ذیگه CSS کدهای HTML :

کدهای HTML :

[php]

<div class="flip-container" ontouchstart="this.classList.toggle(‘hover’);">

<div class="flipper">

<div class="front">
<!– front content –>
</div>

<div class="back">
<!– back content –>
</div>

</div>

</div>

[/php]

کدهای CSS :

[css]
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 320px;
height: 480px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
background : black;
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background : red;
}
[/css]

این کدها رو میتونید خودتون بهش کد اضافه کنید و بهترش کنید و استایل های مختلف بهش بدید و … من این کد هارو براتون تو یک فایل HTML براتون آپلود میکنم که اگه دوست داشتید دانلود کنید و داشته باشیدش …