في دورة اليوم ، سأقدم لك كيفية إنشاء مكعبات ثلاثية الأبعاد باستخدام CSS3. يمكنك تصفح التأثيرات الفعلية من خلال الرابط أدناه ، وتشغيل المفاتيح لأعلى ولأسفل اليسرى واليمين لتحقيق تأثير الوجه للمكعب.
عنوان العرض التوضيحي : http://www.cuoxin.com/jiaoben/70022.htmlلنبدأ بكيفية تحقيق ذلك.
HTML :<div id = "التجربة">
<div id = "cube">
<viv>
وجه واحد
</div>
<viv>
لأعلى ، أسفل ، يسار ، يمين
</div>
<viv>
لوريم Ipsum.
</div>
<viv>
أشكال جديدة من الملاحة ممتعة.
</div>
<viv>
تدوير 3D مكعب
</div>
<viv>
المزيد من المحتوى
</div>
</div>
</div>
في HTML أعلاه ، تمثل DIVs الستة مع الفصل كوجه الوجوه الستة من المكعب ، ويتم تمييزها باستخدام أسماء الفصول من واحد إلى ستة. تحتوي الحاوية الخارجية على طبقتين من الحاويات مع مكعب المعرف والتجربة. كلتا الطبقتين ضرورية. بدون أي شخص ، لا يمكن إنتاج تأثير ثلاثي الأبعاد.
من بينها ، تلعب التجربة دور العدسة. اضبط الطول البؤري عليه بحيث يمكن عرض التأثير ثلاثي الأبعاد على العناصر الداخلية.
تحدد سمة المنظور عمق مستوى المحور z ، ويحدد أيضًا الأبعاد النسبية للعناصر أعلى وأسفل الطائرة. بشكل عام ، كلما كانت قيمة المنظور الأصغر ، أكبر الكائن ، كلما اقترب منك ؛ كلما زادت قيمة المنظور ، كلما كانت الكائن أصغر ، بعيدًا عنك. يمكنك عرض التأثير من خلال http://www.webkit.org/blog-files/3d-transforms/persevent-by-example.html.
تحدد خاصية المنظور الأولي أصل أصل المنظور.
CSS :#تجربة {
-webkit-perspective: 800 ؛
-Moz-perspective: 800 ؛
-النوبر: 800 ؛
المنظور: 800 ؛
-webkit-perseptor-arigin: 50 ٪ 200px ؛
-moz-persperation-arigin: 50 ٪ 200px ؛
-o-persperation-arigin: 50 ٪ 200px ؛
المنظور الأولي: 50 ٪ 200px ؛
}
تحتوي الخصائص التي يضعها المكعب على عرض ثابت وارتفاع ، وتعيين الموضع على النسبية. يعد الارتفاع والعرض الثابتين ضروريين حتى تتمكن العناصر الموجودة في المكعب من أداء الرسوم المتحركة ثلاثية الأبعاد داخل منطقة محددة. إذا قمت بتعيين الارتفاع والعرض على 100 ٪ ، فستتحرك العناصر الموجودة في المكعب عبر نطاق الصفحة بأكمله.
يستخدم الانتقال لضبط الخصائص المتعلقة بالرسوم المتحركة. أسلوب التحويل: Preserve-3D ؛ يجعل جميع العناصر في المكعب تنتج تأثيرات ثلاثية الأبعاد ككل.
يمكنك تصفح http://www.zhangxinxu.com/wordpress/2012/09/css3/">css3-3d-transform-persiptive-animate-trantition/ لمزيد من المعلومات.
CSS:
#cube {
الموقف: قريب
الهامش: 100px Auto ؛
الارتفاع: 400 بكسل ؛
العرض: 400 بكسل ؛
-Webkit-transition: -webkit-transform 2S Linear ؛
-Moz-transition: -moz-transform 2s Linear ؛
-الرانس: -o -ransform 2s خطي ؛
الانتقال: تحويل 2S الخطية ؛
-webkit-transform-style: Preserve-3D ؛
-الموز النموذجية: الحفاظ على 3D ؛
-زول على طراز التحويل: الحفاظ على 3D ؛
أسلوب التحويل: Preserve-3D ؛
}
بعد ذلك ، قم بتعيين سمة CSS للوجوه الستة من المكعب.
CSS :.وجه {
الموقف: مطلق ؛
الارتفاع: 360 بكسل ؛
العرض: 360 بكسل ؛
الحشو: 20 بكسل ؛
خلفية اللون: RGBA (50 ، 50 ، 50 ، 0.7) ؛
}
بعد ذلك ، قم بتعيين الخصائص ذات الصلة ثلاثية الأبعاد للوجوه الستة ، واستخدم rotatex أو rotatey لتحقيق قلب سطح المكعب ، واستخدام الترجمة لتحقيق حركة سطح المكعب في الفضاء ثلاثي الأبعاد.
CSS :#cube. One {
-webkit-transform: rotatex (90deg) Translatez (200px) ؛
-Moz-transform: Rotatex (90deg) Translatez (200px) ؛
-O-TRANDFORD: ROTATEX (90DEG) Translatez (200px) ؛
تحويل: Rotatex (90deg) Translatez (200px) ؛
}
#cube .two {
-webkit-transform: Translatez (200px) ؛
-moz-transform: Translatez (200px) ؛
-O التحول: Translatez (200px) ؛
تحويل: Translatez (200px) ؛
}
#cube. three {
-webkit-transform: rotatey (90deg) Translatez (200px) ؛
-moz-transform: Rotatey (90deg) Translatez (200px) ؛
-O التحول: ROTATEY (90DEG) Translatez (200px) ؛
التحويل: Rotatey (90deg) Translatez (200px) ؛
}
#cube .four {
-webkit-transform: Rotatey (180deg) Translatez (200px) ؛
-Moz-transform: Rotatey (180deg) Translatez (200px) ؛
-O التحول: ROTATEY (180DEG) Translatez (200px) ؛
التحويل: Rotatey (180deg) Translatez (200px) ؛
}
#cube .five {
-webkit-transform: rotatey (-90deg) Translatez (200px) ؛
-moz-transform: Rotatey (-90deg) Translatez (200px) ؛
-O التحول: ROTATEY (-90deg) Translatez (200px) ؛
التحويل: Rotatey (-90deg) Translatez (200px) ؛
}
#cube .six {
-webkit-transform: rotatex (-90deg) Translatez (200px) ؛
-moz-transform: rotatex (-90deg) Translatez (200px) ؛
-O-transform: Rotatex (-90deg) Translatez (200px) ؛
تحويل: Rotatex (-90deg) Translatez (200px) ؛
}
آخر شيء يجب فعله هو ربط حدث KeyDown بالصفحة ، بحيث يتم تحقيق تأثير حركة Cube Flip للأعلى ، وأسفل ، والأسفل واليسرى ، وتأثير حركة Flip Cube.
جافا سكريبت:
var xangle = 0 ، yangle = 0 ؛
document.adDeventListener ('Keydown' ، function (e)
{
التبديل (e.KeyCode)
{
الحالة 37: // اليسار
يانجل -= 90 ؛
استراحة؛
الحالة 38: // UP
Xangle += 90 ؛
استراحة؛
الحالة 39: // الحق
yangle += 90 ؛
استراحة؛
الحالة 40: // لأسفل
Xangle -= 90 ؛
استراحة؛
} ؛
$ ('cube'). style.webkittransform = "rotatex ("+xangle+"deg) rotatey ("+yangle+"deg) ؛
}، خطأ شنيع)؛
هذا كل شيء للدورة ، يمكنك تجربته بعد ذلك.