چرخش سه بعدی تصاویر وب سایت به همراه سایه – 3D Image Flip

قطغا این پست از سایت اسکریپت دات کام میتونه بسیاری از مشکلات شما کاربران گرامی رو در ضمینه افکت چرخش 180 برای تصاویر و درج یک نوشته در پشت آنها رو حل کند .

درخواست های زیادی داشتم مبنی بر آموزش این افکت از html و css3 که اتفاقا در حال حاضر بسیار هم در بین وب سایت های ایرانی و خارجی مد شده و از آن بسیار استفاده میشود.

شرح کار این افکت به این صورت میباشد که کاربر بعد از بردن ماوس بر روی یک تصویر , تصویر 180 درجه چرخیده و نوشته ی پشت آن نمایان میشود .

آموزش های بسیار زیادی در تمامی وب سایت ها موجود می باشد که بیشتر آنها دارای نقص می باشد . اما این آموزش که در ادامه برای شما عزیزان قرار خواهم داد , ٪100 تست شده و بهینه شده برای تمامی مرورگر های جدید می باشد .

جالب تر این است که برای این افکت , سایه زیرین هم در نظر گرفته شده که زیبایی دو چندانی به آن بخشیده …

و اما آموزش : 

برای این کار در ابتدا شما باید کد زیر را در html خود قرار دهید :

<div class="vms-flip-3d">
	<figure>
		<img src="vahid-majidi.jpg" alt="vahid-majidi">
		<figcaption>Vahid Majidi</figcaption>
	</figure>
</div>

و سپس کد های زیر را در css خود قرار دهید :

div.vms-flip-3d *{
	margin:0px;
	padding:0px;
}
div.vms-flip-3d {
	-webkit-perspective:1200px;
	-moz-perspective:1200px;
	-o-perspective:1200px;
	-ms-perspective:1200px;
	perspective:1200px;
	width: 200px;
	height:200px;
	float: left;
	margin:10px;
}
div.vms-flip-3d figure {
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: 1s transform;
	-moz-transition: 1s transform;
	-o-transition: 1s transform;
	-ms-transition: 1s transform;
	transition: 1s transform;
	font-size: 1.6rem;
	display:inline-block;
}
div.vms-flip-3d figure img {
	width: 100%;
	height: auto;
}
div.vms-flip-3d figure figcaption {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 0;
	-webkit-transform: rotateY(180deg) translateZ(1px);
	-o-transform: rotateY(180deg) translateZ(1px);
	-moz-transform: rotateY(180deg) translateZ(1px);
	-ms-transform: rotateY(180deg) translateZ(1px);
	transform: rotateY(180deg) translateZ(1px);
	background: rgba(255,255,255,0.9);
	text-align: center;
	padding-top: 45%;
	box-sizing:border-box;
	opacity: 0.6;
	-webkit-transition: 1s .5s opacity;
	-moz-transition: 1s .5s opacity;
	-o-transition: 1s .5s opacity;
	-ms-transition: 1s .5s opacity;
	transition: 1s .5s opacity;
	backface-visibility:hidden;
}
div.vms-flip-3d:hover figure { 
	transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
}
div.vms-flip-3d:hover figure figcaption {
	opacity: 1;
	backface-visibility:visible;
}
/*Start Shadow*/
div.vms-flip-3d figure:after {
	content: " ";
	display: block;
	height: 8vw;
	width: 100%;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	-o-transform: rotateX(90deg);
	-ms-transform: rotateX(90deg);
	transform: rotateX(90deg);
	background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0) 100%); 
}
/*End Shadow*/

نکته ۱ : در css بالا هر جا width:200px و height:200px مشاهده کردید , باید آن را به اندازه عکسی که خودتان استفاده میکنید , تغییر دهید . ( این انداره که هم اکنون قرار داده شده , برای عکس پیشفرض می باشد )

نکته ۲ :‌ اگر نیازی به سایه ندارید , کافیست در css بالا , قسمت بین Start Shadow و End Shadow را حذف نمایید .

نکته ۳ :‌ کاملا مشخص است که در صورت آشنایی کامل با css , شما میتوانید با تغییرات اساسی در کد های بالا , کد خود را شخصی سازی کنید .

دموی آماده افکت

دانلود فایل آماده دموی افکت

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی