استخدام خاصية التحول لقلب العناصر إلى الاتجاه الآخر

[الفارس]

استخدام خاصية التحول لقلب العناصر إلى الاتجاه الآخر أيضًا، مثل قلب صورة إلى الجزء الخلفي منها.

أولًا نكتب تعليمات بناء بطاقة الصورة من خلال html

<div class="card-container">
<div class="card">
<div class="side"><img src="https://academy.hsoub.com/uploads/monthly_2016_01/SiteLogo-346x108.png.dd3bdd5dfa0e4a7099ebc51f8484032e.png" alt=</div>
<div class="side back">/div>
</div>
</div>
ثم نبدأ بكتابة تعليمات تحريك البطاقة وقلبها إلى الجزء الآخر من خلال CSS3

.card-container {
height: 108px;
perspective: 600;
position: relative;
width: 346px;
background: #444;
}
.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}
.card:hover {
transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
}
.card .back {
transform: rotateY(180deg);
}