السلام عليكم أعزائي زوار
مدونتي,اليوم سنتعلم اضافة تاثير الدوران على الصور بواسطة الCSS3. بكل
صراحة خلق تاثير على الصورة هو امر بسيط جداً خاصة بعض ظهور الCSS3 ورغم
ذلك سأقوم بطرح خاصية من خصائص الCSS3 الا وهي transform مع الدالة
()rotate.
الدالة
()rotate تجعل العنصر يدور باتجه عقارب الساعة حسب الزاوية المعطى له ,كما
يمكن لهذه الدالة ادارة العنصر عكس اتجاه الساعة اذا كانت قيمة الزاوية
سالبة.
سنقوم باضافة دوران للصور بمقدار 5 درجات مئوية
قم بتحرير قالبك>>ابحث (CTRL+F) عن الوسم التالي
سنقوم باضافة دوران للصور بمقدار 5 درجات مئوية
قم بتحرير قالبك>>ابحث (CTRL+F) عن الوسم التالي
]]></b:skin>
والصق كود الCSS التالي فوقه مباشرة img.foto {
background-color:#ffffff;
border:0px;
outline:none;
padding:5px 5px 20px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
box-shadow:0 1px 3px rgba(0,0,0,0.7);
}
img.foto:hover {
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
transform:rotate(5deg);
}
الصورة تحتوي على رابط
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-IMG"><img class="foto" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlebcPUWSkCzIU58aqFshdJ-5gIp9e-4twyZVTzSFJuEcatQ7y_fUKq9b990BpR6WgKcLSWuuTEYMXl-d4XE5QTVq5yHetS7iCB8zhjOuua5btAAbLfQJa0-4KgTV4LJ_9ZGtlySuVI8/s1600/b81a7ed66e3.jpg" alt="" id="BLOGGER_PHOTO_ID_5636537814866564146" border="0" /></a>
<img alt="" class="foto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlebcPUWSkCzIU58aqFshdJ-5gIp9e-4twyZVTzSFJuEcatQ7y_fUKq9b990BpR6WgKcLSWuuTEYMXl-d4XE5QTVq5yHetS7iCB8zhjOuua5btAAbLfQJa0-4KgTV4LJ_9ZGtlySuVI8/s1600/b81a7ed66e3.jpg" height="640" width="581" /></div>
]]></b:skin>
img {
background-color:#ffffff;
border:0px;
outline:none;
padding:5px 5px 20px;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);
box-shadow:0 1px 3px rgba(0,0,0,0.7);
}
img:hover {
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-ms-transform:rotate(5deg);
-o-transform:rotate(5deg);
transform:rotate(5deg);
}
0 التعليقات:
إرسال تعليق
من الرائع ان تشاركنا تجربتك ورأيك، من فضلك لا تستخدم اي كلمات خارجة، روابط لا علاقة لها بالموضوع لانه سيتم حذفها فوراً. فالتعليقات خاضعة للإشراف، دعنا نجعل التعليقات ساحة لتبادل الخبرات والنقاش , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار الصندوق.