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

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

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

کدهای HTML :


<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>

کدهای 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;
}

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

Download Demo

جعبه دانلود

  • آموزش ساخت برگه دوطرفه (Flipping Animation)
  • نویسنده :
  • تعداد فروش : https://davidwalsh.name/css-flip
chanel-telgram

درباره آرمان زارعی

با سلام . آرمان زارعی هستم . حدود 4 سال هست که در زمینه طراحی وب فعالیت دارم ... امیدوارم از حداقل چیزی که بلدم در اختیار شما قرار بدم .

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سوال امنیتی * Time limit is exhausted. Please reload the CAPTCHA.