السلام عليكم
- قم بتحميل هدا الملف
- قم بتغيير الصورة
- ثم قم برفعها
- ثم قم بنسخ الرابط لأننا سنحتاجه
- بعدها قم بالصاق هدا الكود في أداة جديدة
<style>
.container{
/* How pronounced should the 3D effects be */
perspective: 800px;
-webkit-perspective: 800px;
background: radial-gradient(#e0e0e0, #aaa);
width:280px;
height:380px;
margin:0 auto;
border-radius:6px;
position:relative;
}
.iphone-front,
.iphone-back{
/* Enable 3D transforms */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/* We are using two separate divs for the front and back of the
phone. This will hide the divs when they are flipped, so that the
opposite side can be seen: */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
width:200px;
height:333px;
position:absolute;
top:50%;
left:50%;
margin:-166px 0 0 -100px;
background:url(http://e.top4top.net/p_195ni1a1.png) no-repeat left center;
/* Animate the transitions */
transition:0.8s;
}
.iphone-back{
/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
background-position:right center;
}
.container:hover .iphone-front{
/* When the container is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.container:hover .iphone-back{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
</style>
<div class="container">
<div class="iphone-front"></div>
<div class="iphone-back"></div>
</div>
و أخيرا قم بتغيير الرابط الأخضر برابط صورتك
'أتمنى أن تنال الاضافة اعجابكم و لا تبخلوا علينا بتهليق




8 التعليقات
واو إضافة رائعة
شكرا
جمييللل ☝
إضافى=ة رائعة, واصل يا مبدع
راااااااااااااااااااااااااااااااااااااااااااااااااااااااااااائع
شكرا
شكرا على الدعم
شكرا على الدعم
* يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق:
1- أن يكون التعليق خاص بمحتوى التدوينة
2- أن لا تضع أي روابط خارجية
* تذكر .. قول الله تعالى { مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيد } عبّر عن تعليقكالإبتسامات