كيف - 3D Flip Box
تعرف على كيفية إنشاء مربع فليب باستخدام CSS.
فليب بوكس
حرك مؤشر الفأرة فوق المربعات أدناه لترى التأثير:
انعكاس أفقي :
الجانب الامامي
الجانب الخلفي
انعكاس عمودي :
الجانب الامامي
الجانب الخلفي
كيفية إنشاء Flip Box
الخطوة 1) أضف HTML:
مثال
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front
Side</h2>
</div>
<div
class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
الخطوة 2) أضف CSS:
مثال
/* The flip box container - set the width and height to whatever you want. We
have added the border property to demonstrate that the flip itself goes out of
the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective:
1000px; /* Remove this if you don't want the 3D effect */
}
/* This
container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform
0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal
flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side */
.flip-box-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
انعكاس عمودي
للقيام بقلب رأسي بدلاً من أفقي ، استخدم rotateX
الطريقة بدلاً من rotateY
:
مثال
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
ملاحظة: هذه الأمثلة لا تعمل بشكل صحيح على الأجهزة اللوحية و / أو الهواتف المحمولة.
نصيحة: انتقل إلى البرنامج التعليمي الخاص بتحولات CSS 2D ، لمعرفة المزيد حول التحولات ثنائية الأبعاد ، مثل طريقة التدوير ().
نصيحة: انتقل إلى برنامج CSS 3D Transforms التعليمي الخاص بنا ، لمعرفة المزيد حول التحولات ثلاثية الأبعاد.