تعزيز استخدام المنظور والتحويل: Translatez. قد لا تجذب عرض المنتج التقليدي انتباه المستخدمين جيدًا ، ولكن إذا تمت إضافة عناصر ثلاثية الأبعاد لارتكاب ذلك ، فربما يكون التأثير جيدًا ~
خريطة التأثير:
اشرح: هذا الإبداع ليس ما أعتقد ، ها ~ تقليد الآخرين ، يجب أن يكون الإبداع على W3CPlus. بالطبع ، النقطة المهمة هي تعليم الجميع كيفية القيام بذلك ، مجرد تقليد كبير ~
بادئ ذي بدء ، علّمك استخدام CSS3 لصنع مربع:
قبل أن يكون هناك CSS ، يجب أن يكون هذا المكعب صعبًا ، أعتقد أنه من الصعب ~
HTML:
<Body> <div class = wapper> <div class = cube> <div class = sign من> 1 </viv> <div class = size back> 6 </fiv> <div class = sign right> 4 </div </viv> <div class = size left> 3 </viv> <div class = size top> 5 </viv> <div class = sign bottom> 2 </viv> </viv> </body>
مرحلة Wapper لهذا التأثير ، هو وضع عنصر المنظور. يمثل Cube مكعب ، ثم 6 Div يمثل كل جانب.
إعدادات Div#Cube على غرار التحويل: Preserve-3D ، ثم تعيين تدوير وترجمة كل عنصر
الآن يتم تداخل جميع المعكرونة على نفس الطائرة ، نستسلم:
يتحرك الخط إلى الأمام ، ومسافة شبه العارضة (50 بكسل) لاتجاه z -axis هي 50 بكسل ؛
مرة أخرى تدور أولاً 180 درجة حول محور Y ، بحيث يكون الخط إلى الخارج ، ثم ترجمة (50 بكسل) ، لأنه تم تدويره 180 درجة في هذا الوقت ، لذلك Tanslatez هبوط تحت.
بنفس الطريقة ، تدور الطائرة الأخرى 90 درجة حول محور X -axis أو Y ، ثم ترجمة (50 بكسل)
CSS:
.wapper {Margin: 100px Auto 0; Width: 100px; Height: 100px; -webkit-Perspective: 1200px; FONT-SIZE: 50px; FONT-Weight: Bold; COLOR: #fff;} .Cub. e {positive: related ؛ الارتفاع: 100px الخلفية: RGBA (255 ، 99 ، 71 ، 0.6) ؛ ؛} .top {-webkit -transform: rotatex (90deg) translatez (50px) ؛}. 90deg) Translatez (50px) ؛} .bottom {-webkit-transform: rotatex (-90deg) translatez (50px) ؛} .back {-webkit-transform: rotatey (-180deg) (50px) ؛}لتأثير العرض ، يمكنك ضبط مسافة المنظور ~
حسنًا ، يُفهم المكعب ، لذا فإن عرض المنتج هذا ليس صعبًا ؛
HTML:
<! > <ul id = content> <li> <div class = wrapper> <img src = images/a.png> <span class = information> <strong> عقد </strong> طريقة ACT إلى متجرك. </span> </viv> </li> <li> <div class = wrapper> <img src = images/b.jpeg> <span class = information> <strong> نموذج العقد </strong> أسهل طريقة ل أضف نموذجًا للخلف إلى متجرك. </strong> أسهل طريقة لإضافة نموذج اتصال إلى متجرك.
CSS:
<type type = text/css> body {font-family: tahoma ، arial ؛} #content {margin: 100px auto 0 ؛} #content li ، #content .wrapper ، #content li img ، #contentitit li span {width: 310px: 100px ؛ 88888 ؛*/} : 3px ؛ : -webkit-regient (خطي ، أعلى اليسار ، القاع الأيسر ، توقف اللون (0 ٪ ، RGBA (236 ، 241 ، 244 ، 1)) ، توقف اللون (100 ٪ ، RGBA (190 ، 202 ، 217 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 117 ، 1 1 ، 117 ، 1 1 ، 1 1 ، 117 ، 1 1 ، 1 ، 1 1 ، 117 ، 1 1 ، 1 1 ، 117 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 117 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 1 1 ، 1 ، 1 1 ، 1 1 ، 1 1 ، 1 ، 117 ،)) ؛ 6S. 255 ، 255 ، 0.5) ؛ التحويل: rotatex (95deg) ؛} #content li: hover img {box-shadow: none ؛ ، 0.3) ؛تم تحليل CSS أعلاه. السماح لجميع مرحلة مشاركة المنتج ، لذلك أضفنا div.wapper له لتعيين العقد التحويلي: adverse-3D ، ثم ضبط منظور تأثير المسرح كل LI. تأثير الوجه النهائي هو حقا على div.wapper.
رمز المصدر انقر للتنزيل
ما سبق هو كل محتويات هذا المقال.