اضافة Iphone ثلاثي الأبعاد بتأثير الانقلاب 360° عرضا

السلام عليكم

1. قم بتحميل هدا الملف
2. قم بتغيير الصورة 

1. ثم قم برفعها
2. ثم قم بنسخ الرابط لأننا سنحتاجه
3. بعدها قم بالصاق هدا الكود في أداة جديدة

 <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> 

و أخيرا قم بتغيير الرابط الأخضر برابط صورتك

'أتمنى أن تنال الاضافة اعجابكم و لا تبخلوا علينا بتهليق

الكاتب : غير معرف

الروسافي عمر مغربي الجنسية العمر 15 سنة أحب التدوين في البداية عملت على اكتشاف الويندوز والحماية و الاختراق وغيرها من المجالات لكني أحببت التدوين ودخلت في مجال التدوين