<div id=”main”><img src=”img/Chrysanthemum.jpg” alt=””>
<img src=”img/Desert.jpg” alt=””>
</div>
تارگت امروز ما مطابق تصویر زیر میباشد. سعی کردیم با دو تصویر و تکنیک perespective ، یک تقویم سه بعدی را بصورت شبیه سازی شده طراحی کنیم.
در این تمرین فقط تصویر اول ورق میخورد و به سمت بالا میرود، اما اگر آموزش ویدئویی زیر را مشاهده نمایید، میتوانید تا 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”>[/box]
دریافت مستقیم فایل : کلیک کنید
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
