X

جستجو


ساخت افکت سه بعدی تصاویر در css


آموزش ساخت یک افکت سه بعدی در css

با سلام خدمت دوستداران و کاربران عزیز شورت کدز ، در این آموزش قصد آموزش چگونگی ایجاد افکت سه بعدی تصاویر با استفاده از css را داریم تا بتوانید در وب سایت ها و پروژه های خود از آن بهره بگیرید . در واقع شما با استفاده از این افکت میتوانید در سایت های خلاقانه بیشترین بهره را ببرید . خب بهتره بریم برای آموزش این افکت با استفاده از html و css .

کدهای HTML افکت سه بعدی ما

<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

در کد بالا ما یک کلاس والد ایجاد کردیم که در داخل آن چهار کلاس ایتم میباشد که شما میتوانید تعداد آن را کم یا زیاد کنیم . کلاس box وظیفه دادن حالت و فرم تصاویر شما را دارد و کلاس های item جهت ایجاد لایه های افکت سه بعدی تصاویر شما میباشد .

کدهای css

عنصر body افکت سه بعدی

ابتدا باید برای ایجاد این پروژه به تگ body صفحه خود استایل های زیر را بدهیم ساختار پروژه خود را ایجاد کنیم . کدهای تگ body به شرح زیر میباشد .

body{
    background: #333;
    display: flex;
    justify-content: center;
    margin-top: 200px;
}

در کد بالا display: flex به منظور وسط چین کردن محتوا صفحه به همراه justify-content: center قرار گرفته است .

عنصر box افکت سه بعدی

.box{
    position: relative;
    background: #00000036;
    width: 300px;
    height: 500px;
    transform: rotate(-30deg
) skew(
30deg
);
}

کد های بالا متعلق به عنصر والد ما با کلاس box میباشد که کدهای قرار گرفته به شکل زیر میباشد .

position: relative : بدلیل اینکه میخواهیم فرزندان این عنصر با کلاس item ، دارای پوزیشن absolute باشند نوشتن این خط ضروری میباشد .

transform: rotate(-30deg ) skew( 30deg ) : با استفاده از این کد به عنصر box در صفحه خود زاویه 30 درجه از سمت چپ و همچنین مورب کردن آن با زاویه 30 درجه را با استفاده از css اعمال میکنیم.

عنصر item

.item{
    background: url(img.jpg);
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
    background-size: cover;
    box-shadow: 1px 1px 10px #ed00ff, -1px -1px 10px #0768a0c4;
    transition: .5s all;
    }
.box:hover .item {
transition: .5s all;
}

با استفاده از کدهای css بالا ما به عناصر ایتم خود در صفحه ابتدا پس زمینه ای شامل یک تصویر میدهیم ، سپس به تمامی آنها position: absolute میدهیم و بخاطر اینکه به عنصر box پوزیشن relative دادیم با استفاده از دستورات top:0 و … کلاس ایتم خود را به اندازه کلاس box تنظیم میکنیم . پس از آن با استفاده از background-size موقعیت و حالت پس زمینه را تنظیم کرده و به آن یک سایه با استفاده از box-shadow میدهیم . در خطهای آخر نیز سرعت اجرا کدها در صورت تغییر را بر روی 0.5 ثانیه قرار داده ایم .

.box:hover .item:nth-child(1) {
    transform: translate(50px, -40px);
    opacity: 0.25;
    filter: grayscale(1);
}

.box:hover .item:nth-child(2){
    transform: translate(100px, -80px);
    opacity: 0.5;
    filter: grayscale(.75);
}
.box:hover .item:nth-child(3){
    transform: translate(150px, -120px);
    opacity: 0.75;
    filter: grayscale(0.25);
}
.box:hover .item:nth-child(4){
    transform: translate(200px, -160px);
    opacity: 1;
    filter: grayscale(0);
}

بدلیل آنکه ما در html خود چهار div با کلاس item ایجاد کرده ایم در این قطعه کد نیز تا فرزند چهارم فرا خوانی کرده ایم . کد های بالا به هنگام قرار گرفتن موس بر روی div با کلاس box فراخوانی و اجرا میشوند .

transform: translate(50px, -40px) : با استفاده از این کد که مقدار آن در فرزند بعدی دو برابر میگردد با عنصر خود را 50 پیکسل از سمت چپ و 40 پیکسل از سمت پایین فاصله میدهیم . تنظیم این اعداد وابسته به طرح شما متغیر میباشد اما به یاد داشته باشید پس از تنظیم مقادیر این قسمت که جهت جابجایی میباشد ، فرزندان بعدی مضربی از عدد اول شما میباشند .

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

filter : جهت زیبایی کار در کنار opacity مقدار فیلتر رنگی را برروی سیاه و سفید قرار داده ایم تا حالت تصویر و نتیجه جالبتری داشته باشیم.

دانلود فایل پروژه : دانلود کنید

ویدئو آموزشی افکت سه بعدی تصاویر در css

لینک ویدیو در آپارات : مشاهده