كيفية إنشاء سلايدر ثلاثى الأبعاد "3D Slider" باستخدام CSS3

تعلم كيفية إنشاء سلايدر ثلاثي الأبعاد مذهل باستخدام CSS3 لجعل موقعك أكثر تفاعلية وجاذبية. في خطوات بسيطة يمكنك تحميل كود سلايدر ثلاثى الأبعاد "3D Slider" لاستخدامه بموقع الويب الخاص بك.

كود سلايدر ثلاثي الأبعاد "3D Slider"

إذا كنت تبحث عن طريقة لجعل موقع الويب الخاص بك أكثر تفاعلية وجاذبية، فإن إضافة سلايدر ثلاثي الأبعاد (3D slider) يمكن أن يكون الحل الأمثل. في هذا المقال، سنتعلم كيفية إنشاء سلايدر ثلاثي الأبعاد باستخدام CSS3. سنتناول جميع الخطوات الضرورية من البداية حتى النهاية، ونقدم كودًا يمكنك استخدامه وتعديله وفقًا لاحتياجاتك.

سلايدر ثلاثى الأبعاد "3D Slider" باستخدام CSS3

ما هي أنواع سلايد الصور (Image Slider)؟

تتنوع أنواع سلايد الصور لتناسب احتياجات مختلفة، ومن أبرز هذه الأنواع:

سلايدر دائري: يعرض الصور بطريقة دائرية، مما يوفر تجربة جذابة ومميزة للمستخدم.
سلايدر أفقي: يتم عرض الصور فيه بشكل أفقي، وهو النوع الأكثر شيوعًا ويُستخدم غالبًا في الصفحات الرئيسية للمواقع.
سلايدر عمودي: يعرض الصور بشكل عمودي، ويعتبر مناسبًا لبعض التصميمات الخاصة.

ميزات استخدام سلايدر ثلاثي الأبعاد "3D Slider"

استخدام سلايدر ثلاثي الأبعاد "3D Slider" يمكن أن يوفر عدة ميزات تساهم في تحسين تجربة المستخدم وإضفاء جاذبية بصرية على الموقع. من بين هذه الميزات:

التأثير البصري المتقدم: يضفي تأثيرات بصرية ثلاثية الأبعاد تفاعلية وجذابة، مما يجعل الموقع يبدو أكثر حداثة وتميزًا.
تجربة مستخدم محسنة: يتيح للمستخدمين تجربة تصفح ممتعة ومختلفة، مما قد يزيد من مدة بقائهم على الموقع وتفاعلهم مع المحتوى.
القدرة على عرض معلومات متعددة: يمكن استخدام السلايدر لعرض مجموعة متنوعة من الصور والنصوص بطريقة سلسة وجذابة، مما يساعد في تقديم محتوى متعدد الأبعاد.
لفت الانتباه: تساعد التأثيرات ثلاثية الأبعاد في جذب انتباه الزوار بشكل أفضل من السلايدرات التقليدية، مما يمكن أن يزيد من معدل التفاعل.
التكامل مع التصميم العام: يمكن دمج السلايدر ثلاثي الأبعاد بشكل يتناغم مع التصميم العام للموقع، مما يعزز من مظهره العام ويجعله أكثر احترافية.
مرونة التخصيص: يوفر إمكانية تخصيص التأثيرات والحركات وفقًا لاحتياجات الموقع، مما يسمح بإنشاء تجربة فريدة تتناسب مع هوية العلامة التجارية.
دعم محتوى متعدد الوسائط: يمكن دمج مقاطع الفيديو والنصوص والعناصر التفاعلية بسهولة، مما يزيد من تنوع المحتوى المقدم.

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

خصائص إنشاء سلايدر "3D Slider" باستخدام CSS3

كود خفيف وسلس: يتيح CSS3 إمكانية كتابة كود خفيف الوزن مما يساعد في تحسين سرعة تحميل الصفحة وأداؤها.
متوافق مع مختلف المتصفحات: يعمل الكود المكتوب باستخدام CSS3 على معظم المتصفحات الحديثة بدون مشاكل، مما يضمن تجربة متسقة للمستخدمين.
تأثيرات ثلاثية الأبعاد: يتيح CSS3 استخدام تحويلات (Transforms) لإضافة تأثيرات ثلاثية الأبعاد.
تخصيص مرن: يمكن تخصيص الكود بسهولة لتلبية متطلبات التصميم الخاصة بك.
تحسين تجربة المستخدم: يساهم السلايدر ثلاثي الأبعاد في تحسين تجربة المستخدم عبر تقديم محتوى جذاب وتفاعلي يجذب الانتباه.
سهولة الاستخدام والتكامل: يمكن تضمين السلايدر بسهولة في أي صفحة HTML والتكامل مع أي محتوى أخر لتحسين تصميم الموقع بأكمله.

كود سلايدر ثلاثى الأبعاد "3D Slider" باستخدام CSS3

<style>  
.title {
  text-align: center;
  color: #333;
  font: 24px Helvetica, Arial, serif;
}
.creds {
  text-align: center;
  color: #666;
  font: 12px Helvetica, Arial, serif;
}
.creds a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px dotted #000;
}
.three-d-container{
margin:30px auto;
width:300px;
height:300px;
border-radius: 3px;
position:relative;
-webkit-perspective:1000px;
   -moz-perspective:1000px;
    -ms-perspective:1000px;
     -o-perspective:1000px;
        perspective:1000px;
-webkit-box-shadow:0 20px 60px rgba(0,0,0,0.2),               0 0 40px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:0 20px 60px rgba(0,0,0,0.2),               0 0 40px rgba(0,0,0,0.2) inset;
        box-shadow:0 20px 60px rgba(0,0,0,0.2),               0 0 40px rgba(0,0,0,0.2) inset;
}
.three-d-cube{
width:100%;
height:100%;
position:absolute;
-webkit-transition:-webkit-transform 1s;
   -moz-transition:   -moz-transform 1s;
     -o-transition:     -o-transform 1s;
        transition:        transform 1s;
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
-webkit-transform:translateZ( -150px );
   -moz-transform:translateZ( -150px );
    -ms-transform:translateZ( -150px );
     -o-transform:translateZ( -150px );
        transform:translateZ( -150px );
}
.three-d-cube .three-d-item{
width:100%;
height:100%;
display:block;
margin:0;
position:absolute;

}
.three-d-cube .three-d-item img{
width:100%;
height:100%;
display:block;
margin:0;
}
.three-d-item:nth-child(1){
-webkit-transform:rotateY(   0deg ) translateZ( 150px );
   -moz-transform:rotateY(   0deg ) translateZ( 150px );
    -ms-transform:rotateY(   0deg ) translateZ( 150px );
     -o-transform:rotateY(   0deg ) translateZ( 150px );
        transform:rotateY(   0deg ) translateZ( 150px );
}
.three-d-item:nth-child(2){
-webkit-transform:rotateX( 180deg ) translateZ( 150px );
   -moz-transform:rotateX( 180deg ) translateZ( 150px );
    -ms-transform:rotateX( 180deg ) translateZ( 150px );
     -o-transform:rotateX( 180deg ) translateZ( 150px );
        transform:rotateX( 180deg ) translateZ( 150px );
}
.three-d-item:nth-child(3){
-webkit-transform:rotateY(  90deg ) translateZ( 150px );
   -moz-transform:rotateY(  90deg ) translateZ( 150px );
    -ms-transform:rotateY(  90deg ) translateZ( 150px );
     -o-transform:rotateY(  90deg ) translateZ( 150px );
        transform:rotateY(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(4){
-webkit-transform:rotateY( -90deg ) translateZ( 150px );
   -moz-transform:rotateY( -90deg ) translateZ( 150px );
    -ms-transform:rotateY( -90deg ) translateZ( 150px );
     -o-transform:rotateY( -90deg ) translateZ( 150px );
        transform:rotateY( -90deg ) translateZ( 150px );
}
.three-d-item:nth-child(5){
-webkit-transform:rotateX(  90deg ) translateZ( 150px );
   -moz-transform:rotateX(  90deg ) translateZ( 150px );
    -ms-transform:rotateX(  90deg ) translateZ( 150px );
     -o-transform:rotateX(  90deg ) translateZ( 150px );
        transform:rotateX(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(6){
-webkit-transform:rotateX( -90deg ) translateZ( 150px );
   -moz-transform:rotateX( -90deg ) translateZ( 150px );
    -ms-transform:rotateX( -90deg ) translateZ( 150px );
     -o-transform:rotateX( -90deg ) translateZ( 150px );
        transform:rotateX( -90deg ) translateZ( 150px );
}
.a:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(    0deg );
   -moz-transform:translateZ( -150px ) rotateY(    0deg );
    -ms-transform:translateZ( -150px ) rotateY(    0deg );
     -o-transform:translateZ( -150px ) rotateY(    0deg );
        transform:translateZ( -150px ) rotateY(    0deg );
}
.b:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX( -180deg );
   -moz-transform:translateZ( -150px ) rotateX( -180deg );
    -ms-transform:translateZ( -150px ) rotateX( -180deg );
     -o-transform:translateZ( -150px ) rotateX( -180deg );
        transform:translateZ( -150px ) rotateX( -180deg );
}
.c:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(  -90deg );
   -moz-transform:translateZ( -150px ) rotateY(  -90deg );
    -ms-transform:translateZ( -150px ) rotateY(  -90deg );
     -o-transform:translateZ( -150px ) rotateY(  -90deg );
        transform:translateZ( -150px ) rotateY(  -90deg );
}
.d:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(   90deg );
   -moz-transform:translateZ( -150px ) rotateY(   90deg );
    -ms-transform:translateZ( -150px ) rotateY(   90deg );
     -o-transform:translateZ( -150px ) rotateY(   90deg );
        transform:translateZ( -150px ) rotateY(   90deg );
}
.e:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX(  -90deg );
   -moz-transform:translateZ( -150px ) rotateX(  -90deg );
    -ms-transform:translateZ( -150px ) rotateX(  -90deg );
     -o-transform:translateZ( -150px ) rotateX(  -90deg );
        transform:translateZ( -150px ) rotateX(  -90deg );
}
.f:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX(   90deg );
   -moz-transform:translateZ( -150px ) rotateX(   90deg );
    -ms-transform:translateZ( -150px ) rotateX(   90deg );
     -o-transform:translateZ( -150px ) rotateX(   90deg );
        transform:translateZ( -150px ) rotateX(   90deg );
}
.three-d-bullet{
margin:350px 10px 0 0;
float:left;
}
.three-d-bullet:first-child{
margin:350px 10px 0 88px;
}
</style>

<h2 class="title">سلايدر ثلاثى الأبعاد "3D Slider" باستخدام CSS3</h2>
<p class="creds">
  Created by <a href="https://www.alkoptantech.com" target="_blank">Alkoptantech</a></p>
<section class="three-d-container">
      <input checked="" class="three-d-bullet a" name="three-d" type="radio" />
      <input class="three-d-bullet b" name="three-d" type="radio" />
      <input class="three-d-bullet c" name="three-d" type="radio" />
      <input class="three-d-bullet d" name="three-d" type="radio" />
      <input class="three-d-bullet e" name="three-d" type="radio" />
      <input class="three-d-bullet f" name="three-d" type="radio" />
      <div class="three-d-cube">
        <figure class="three-d-item">
          <img alt="" src="https://bit.ly/4bLYw57" />
        </figure>
        <figure class="three-d-item">
          <img alt="" src="https://bit.ly/3XfIrjA" />
        </figure>
        <figure class="three-d-item">
          <img alt="" src="https://bit.ly/4aMBoCi" />
        </figure>
        <figure class="three-d-item">
          <img alt="" src="https://bit.ly/3VcdY3g" />
        </figure>
        <figure class="three-d-item">
          <img alt="" src="https://bit.ly/4c02YO1" />
        </figure>
        <figure class="three-d-item">
          <img alt="" src="https://bit.ly/3Rbo3fM" />
        </figure>
      </div>
    </section>
<br /><br />

تحميل كود سلايدر - 3D Slider

كيفية تركيب كود السلايدر في صفحة المقال

لتركيب كود السلايدر في صفحة المقال، يجب عليك اتباع الخطوات التالية:

نسخ كود السلايدر: انسخ الكود الموجود أعلاه.
الانتقال إلى صفحة المقال: انتقل إلى صفحة المقال التي تريد إضافة السلايدر إليها.
تحويل صفحة المقال لوضع HTML: قم بتحويل صفحة المقال إلى وضع HTML لتتمكن من إضافة الكود الخاص بالسلايدر. يمكن القيام بذلك من خلال نقرة على زر التبديل للوضع HTML في محرر المقال.
إضافة الصور وضغطها: قم بتحسين حجم الصور وضغطها بصيغة ويب لتحسين سرعة تحميل الصفحة وجودتها.
وضع كود السلايدر في المقال: اختر المكان الذي ترغب في إضافة السلايدر إليه في المقال. وقم بلصق الكود الذي قمت بنسخه في الخطوة الأولى في هذا المكان.
حفظ التغييرات: بمجرد وضع الكود، انقر على زر الحفظ أو النشر لحفظ التغييرات.
رؤية التغييرات في المقال:انتقل لرؤية التغييرات التي قمت بها في المقال لمشاهدة السلايدر ثلاثي الأبعاد.

باتباع هذه الخطوات، يمكنك تركيب السلايدر في صفحة المقال بسهولة و مشاهدته على الفور.

الأسئلة الشائعة حول استخدام سلايدر ثلاثى الأبعاد "3D Slider"

ما هي فائدة استخدام السلايدر ثلاثي الأبعاد؟

السلايدر ثلاثي الأبعاد يضيف تأثيرات بصرية جذابة ويجعل الموقع أكثر تفاعلية وحيوية.

هل يمكنني استخدام JavaScript مع CSS3 لتحسين السلايدر؟

نعم، يمكنك استخدام JavaScript لتعزيز السلايدر وإضافة مزيد من التفاعلية.

هل يتوافق السلايدر ثلاثي الأبعاد مع جميع المتصفحات؟

معظم المتصفحات الحديثة تدعم CSS3، ولكن قد تواجه بعض القيود مع المتصفحات القديمة.

هل يؤثر سلايدر على سرعة الصفحة؟

نعم، يمكن أن يؤثر سلايدر الصور على سرعة تحميل الصفحة لعدة أسباب، منها:

حجم الصور: إذا كانت الصور المستخدمة في السلايدر ذات حجم كبير، فإنها ستزيد من وقت تحميل الصفحة.
عدد الصور: كلما زاد عدد الصور في السلايدر، زاد حجم البيانات التي يجب تحميلها، مما يمكن أن يبطئ الصفحة.
البرمجيات والأكواد: استخدام أكواد معقدة أو غير محسنة يمكن أن يبطئ من سرعة تحميل الصفحة.
المؤثرات والانتقالات: إضافة تأثيرات بصرية وانتقالات معقدة يمكن أن يستهلك المزيد من موارد المتصفح، مما يؤثر على أداء الصفحة.
التحميل المتزامن: إذا كانت الصور والموارد الأخرى في السلايدر تُحمل في نفس الوقت، فقد يؤدي ذلك إلى تأخير تحميل باقي عناصر الصفحة.

لتقليل تأثير السلايدر على سرعة الصفحة، يمكن اتباع بعض النصائح:

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

وفي النهاية...

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

تعديل المقال

العلامات الرئيسية