ساخت تقویم سه بعدی با CSS3

ساخت تقویم سه بعدی با CSS3

تارگت امروز ما مطابق تصویر زیر میباشد. سعی کردیم با دو تصویر و تکنیک perespective ، یک تقویم سه بعدی را بصورت شبیه سازی شده طراحی کنیم.

ساخت تقویم سه بعدی با CSS3

در این تمرین فقط تصویر اول ورق میخورد و به سمت بالا میرود، اما اگر آموزش ویدئویی زیر را مشاهده نمایید، میتوانید تا N مرحله ورق زدن آن ها را ادامه دهید.

قسمت استایل های کد فوق :

[box type=”success” align=”aligncenter” class=”” width=””]

<style>
*, ::after, ::before{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#main{
width: 300px;
height: 200px;
margin: 200px auto;
position: relative;
}
#main>img{
width: 100%;
position: absolute;
top: 0; left: 0;
transition: 2s;
transform-origin: top;
}
#main>img:first-child{
z-index: 2;

}
#main:hover img:first-child{
transform:perspective(1000px) rotateX(270deg);
}
</style>

[/box]

قسمت HTML کد فوق:

[box type=”success” align=”aligncenter” class=”” width=””]

<div id=”main”>
<img src=”img/Chrysanthemum.jpg” alt=””>
<img src=”img/Desert.jpg” alt=””>
</div>

[/box]

دریافت مستقیم فایل : کلیک کنید

دیدگاهتان را بنویسید

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