تریک پنجره ۳بعدی با css3

تریک پنجره 3بعدی با css3
تریک پنجره ۳بعدی با css3

 

یکی از معروفترین و جالب ترین امکانات 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]

 

دانلود کل سورس یکجا : کلیک کنید

 

 

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

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