كيفية إضافة تأثير ثري دي على صور مدونات بلوجر

السلام عليكم ورحمة الله وبركاته 

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

تابعوا أخواني معي طريقة التركيب .

لمشاهدة الإضافة

- طريقة التركيب :

1- ادخل إلى مدونتك | ثم أختر تحرير قالب .

2- إبحث عن الوسم : </head>

3- ضع الكود التالي فوقه : 

<style>
.profile-image {
  margin-bottom:20px;
}
div.flip-3d {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d-skills {
 perspective: 1200px; width: 100%; float: left;
}
div.flip-3d figure {
 position: relative;
 transform-style: preserve-3d;
 transition: 1s transform;
 font-size: 1.6rem;
}
div.flip-3d figure img {
 width: 100%;
}
div.flip-3d figure figcaption {
 position: absolute;
width: 105%; height: 50%; top: 0;
 transform: rotateY(.5turn) translateZ(1px);
 background: rgba(255,255,255,0.9);
 text-align: center;
 padding-top: 45%;
 opacity: 0.6;
 transition: 1s .5s opacity;
}
div.flip-3d:hover figure { transform: rotateY(.5turn); }
div.flip-3d:hover figure figcaption { opacity: 1; }
div.flip-3d figure:after {
content: " "; display: block;
height: 8vw; width: 100%;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}
</style>

4- عندما تريد إعداد تدوينة أو مشاركة وتريد إضافة تأثير ثري دي على صورة المشاركة أو التدوينة أستخدم الكود التالي بالصقه في صندوق HTML كما بالصور التالية : 

<div class="profile-image">
<div class="flip-3d">
<br />
<figure>
<img alt="هنا ضع تسمية الصورة" src="هنا ضع رابط الصورة" />
 <figcaption>هنا ضع وصف للصورة!</figcaption>
 </figure>
 </div>
</div>

- وأخيراً نترككم  برعاية الله وتوفيقه .