یکی از معروفترین و جالب ترین امکانات css3 همین ۳بعدی سازی اجسام است. در این تریک جالب قصد داریم وقتی روی تصاویر هاور صورت گرفت، بصورت یک پنجره ۳بعدی روی تصویر باز کنیم و در هر کدام از لت ها، نوشته مخصوصی را قرار دهیم. این تریک برای سایت های فروشگاهی بسیار مناسب است و در کلاس وب۱ مجتمع فنی تهران توسط استاد پارسا قربانیان نگارش شده است.
قسمت HTML کد فوق :
[box type=”success” align=”” class=”” width=””]
<body>
<div class=”para1″>
<div class=”lat1″>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad maiores laboriosam nisi. Pariatur cupiditate nulla, sit illum, optio, sint soluta, repellendus nesciunt corrupti praesentium accusamus quis. Ipsa quaerat quibusdam earum?</p>
</div>
<div class=”lat2″>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente facilis consequuntur, repellendus voluptas deserunt expedita vero dolorem, ut laudantium ad vitae, aperiam, similique optio vel porro architecto nobis sint. Natus!</p>
</div>
</div>
</body>
[/box]
قسمت css کد فوق :
[box type=”success” align=”” class=”” width=””]
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.para1{
width: 400px;
height: 300px;
/* margin: 100px auto;*/
background-image: url(img/Chrysanthemum.jpg);
background-size: cover;
float: left;
margin-top: 100px;
margin-left: calc(50% – 200px);
}
.lat1, .lat2{
width: 50%;
height: 100%;
float: left;
background-color: #a2a4a5;
transition: 1s;
opacity: 0;
}
.lat1{
transform-origin: left;
}
.para1:hover .lat1{
transform:perspective(1000px) rotateY(-150deg);
opacity: 1
}
.lat2{
transform-origin: right;
}
.para1:hover .lat2{
transform:perspective(1000px) rotateY(150deg);
opacity: 1
}
.para1 p{
text-align: justify;
padding: 20px;
transform: rotateY(180deg);
}
</style>
[/box]
دانلود کل سورس یکجا : کلیک کنید
من، پارسا قربانیان موسس مدرسه اینترنتی پرنیان و برگزارکننده اولین دوره های آموزشی تضمین استخدام در ایران هستم. هدف من ایجاد یک معادله برد، برد هست. میخواهیم آرزوهایمان را با هم بسازیم♥
