<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=””]
[/box]
دریافت مستقیم فایل : کلیک کنید