الغرض من هذه المدونة هو أن مثيل HTML5 CSS3 الخاص CSS3 ابتكر تأثير التقليب ثلاثي الأبعاد لـ Baidu Tieba.
مخطط التأثير: مهلا ، لقد صنعت بعض الصور للتخرج الجامعي في طروادة دوارة ، تدور حول نصي الكبير ، ونعمة زراعة الأم ~
1. المنظورتتضمن سمات المنظور سمتين: لا شيء وطول الوحدة.
من بينها ، فإن القيمة الافتراضية لسمة المنظور هي لا شيء ، مما يعني أن الكائن ثلاثي الأبعاد يتم عرضه بزاوية غير محدودة ، لكنه يبدو مسطحًا. تقبل قيمة أخرى <Langth> قيمة وحدة أكبر من 0. ولا يمكن أن تكون وحدتها نسبة مئوية. كلما زادت قيمة <Langth> ، كلما ظهرت الزاوية ، لإنشاء قوة منخفضة للغاية وتغيير مساحة ثلاثية الأبعاد صغيرة جدًا. على العكس ، كلما كانت هذه القيمة أصغر ، كلما كانت الزاوية أقرب ، كلما كانت أقرب ، لإنشاء زاوية عالية الكثافة وتغيير كبير ثلاثي الأبعاد. بعبارة ذلك ببساطة: عندما يتم تعيين إعدادات المنظور ، فكلما كان الأمر أصغر أنه كلما كان التأثير ثلاثي الأبعاد أكثر وضوحًا ، كلما كانت عينيك أقرب إلى الكائن ثلاثي الأبعاد ، والعكس صحيح.
2. التحويل: ترجمة (طول)على افتراض أنه عند تعيين المنظور: 300 بكسل ، كلما تم تعيين قيمة الترجمة ، كلما كان حجم العنصر الطفل أصغر.
جوهر المثال أعلاه:1. أولاً وقبل كل شيء ، فإن حاوية جميع الصور هي الموضع: مطلقة ، فرضت معًا ، ثم قم بتعيين الدوران في وقت واحد إلى 40*i ، i = 0 ، 1 ، 2 ... 9 ؛
2. ثم قم بتعيين الترجمة لكل صورة للحاوية.
HTML:
<! Text/JavaScript Src = ../../ jquery-1.8.3.js> </script> <script type = text/javaScript> // ALERT (64/Math.tan (20/180 * Math.PI))) ) ؛ ؛ deg *] i ++)+deg))}) ؛}) ؛ /1.jpg/> <span> افعل شيئًا واحدًا في وقت واحد ، وفعل بشكل جيد .. </span> </li> <li> وقت ، وفعل بشكل جيد > <img src = img/4.jpg/> <span> Whatver Do Word هو Word بشكل جيد. . </Span>> </span>> </span>> </span> </li> <li> <IMG SRC = IMG/6.jpg/> <span> Action Speak Louder Than Words. </SPAN > </li> <li> <img src = img/7.jpg/> <span> لا يمكنك القيام به اليوم حتى الغد. .jpg/> <span> جاك من جميع الأدوات الماجستير و Master of None </li> </viv> </body> </html "
CSS:
Li {Wide: 128px ؛ 0 ، 0 ، .5) {wid: 900px ؛ JPG) -الانتقال: -webkit-transform 1s ؛ (0deg) Translatez (300px) ؛} li: nth-child (1) {-webkit-traansform: rotatey (40deg) translatez (300px) ؛} li: nth-child (2) {-webkit-transform: rotat ey ( 80deg) Translatez (300px) ؛} li: nth-child (3) {-webkit-transform: rotatey (120deg) translatez (300px) ؛} li: nth-child (4) {-webkit-transform: 16 0deg) translatez (300px) ؛} li: nth-child (5) {-webkit-traansform: rotatey (200deg) translatez (300px) ؛} li: nth-child (6) {-webkit-transform: rotatey (240deg) ترجمة atez ( 300px) ؛} li: nth-child (7) {-webkit-traansform: rotatey (280deg) translatez (300px) ؛} li: nth-child (8) {-webkit-transform: rotatey (300px) ؛} li: nth-child (9) {-webkit-transform: rotatey (360deg) translatez (300px) ؛}Div#المرحلة هي المنظور ، حيث قام كل من Transtatey. القيمة الافتراضية ، وهذا يعني أن جميع العناصر الفرعية يتم تقديمها في الطائرات ثنائية الأبعاد. تشير الحفاظ على 3D إلى أن جميع العناصر الفرعية يتم تقديمها في الفضاء ثلاثي الأبعاد. إذا تم ضبط قيمة نمط التحويل على محمية 3D على عنصر ما ، فإنه يشير إلى أنه لا يقوم بعملية معرض مسطحة ، ويقع كل عنصره الفرعي في مساحة ثلاثية الأبعاد. في ظل الظروف العادية ، يتم استخدام هذه السمة لعنصر التنفيذ لتأثيرات الرسوم المتحركة ثلاثية الأبعاد ، أي أنها تستخدم تأثيرات الرسوم المتحركة ثلاثية الأبعاد ، لذلك يجب أن تكون عناصره الفرعية في مساحة ثلاثية الأبعاد.
شيء واحد للانتباه إلى: في هذا المثال ، فإن تأثير الرسوم المتحركة هو النقر على الماوس. إنه لتدوير هذه طروادة ، لذلك تحتاج فقط إلى تغيير زاوية 40 من حاوية Div#في كل مرة.
ما سبق هو كل محتويات هذا المقال.