เพิ่มการใช้มุมมองและการแปลง: แปล การแสดงผลผลิตภัณฑ์แบบดั้งเดิมอาจไม่ดึงดูดความสนใจของผู้ใช้ได้ดี แต่หากมีการเพิ่มองค์ประกอบ 3 มิติที่เหมาะสมลงในจอแสดงผลบางทีเอฟเฟกต์ก็ดี ~
แผนที่เอฟเฟกต์:
อธิบาย: ความคิดสร้างสรรค์นี้ไม่ใช่สิ่งที่ฉันคิดว่าการเลียนแบบผู้อื่นความคิดสร้างสรรค์ควรอยู่ใน W3CPlus แน่นอนว่าประเด็นคือการสอนทุกคนให้ทุกคนทำมันแค่เลียนแบบสูง ~
ก่อนอื่นสอนให้คุณใช้ CSS3 เพื่อสร้างสแควร์:
ก่อนที่จะมี CSS ลูกบาศก์ดังกล่าวควรทำ ~ ดีฉันคิดว่ามันยาก ~
html:
<body> <div class = wapper> <div class = cube> <div class = sign from> 1 </div> <div class = size back> 6 </div> <div class = Sign Right> 4 </div </div> <div class = ขนาดซ้าย> 3 </div> <div class = size top> 5 </div> <div class = sign bottom> 2 </div> </div> </body>
ขั้นตอนของ Wapper สำหรับเอฟเฟกต์นี้คือการตั้งค่าองค์ประกอบของมุมมอง Cube แสดงถึงลูกบาศก์จากนั้น 6 div แสดงแต่ละด้าน
การตั้งค่า Div#Cube Transfer-style: PRESERVER-3D จากนั้นตั้งค่าการหมุนและแปลแต่ละองค์ประกอบ
ตอนนี้ก๋วยเตี๋ยวทั้งหมดซ้อนทับกันบนระนาบเดียวกันเรายอมแพ้:
ตัวอักษรเคลื่อนที่ไปข้างหน้าระยะทางของกึ่ง margin (50px) ของทิศทาง z -axis คือ 50px;
ย้อนกลับแรกหมุน 180 องศารอบแกน y เพื่อให้แบบอักษรอยู่ด้านนอกจากนั้นแปล (50px) เพราะมันหมุนได้ 180 องศาในเวลานี้ดังนั้น Tanlatez จึงลงและมันก็ลงและมันก็เป็น ลง.
ในทำนองเดียวกันระนาบอื่นจะหมุน 90 องศารอบแกน x -axis หรือ y จากนั้นแปล (50px)
CSS:
.wapher {margin: 100px auto 0; ความกว้าง: 100px; ความสูง: 100px; ;} .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 = เนื้อหา> <li> <div class = wrapper> <img src = images/a.png> <span class = ข้อมูล> <strong> สัญญา </strong> วิธีการดำเนินการของร้านค้าของคุณ </span> </div> </li> <li> <div class = wrapper> <img src = images/b.jpeg> <span class = ข้อมูล> <strong> แบบฟอร์มสัญญา </strong> วิธีที่ง่ายที่สุด เพิ่มแบบฟอร์ม contal ลงในร้านค้าของคุณ </strong> วิธีที่ง่ายที่สุดในการเพิ่มแบบฟอร์มการติดต่อไปยังร้านค้าของคุณ
CSS:
<style type = text/css> body {font-family: tahoma, arial;} #content {margin: 100px auto 0;} #content li, #content .wrapper, #content li img, #contententi 310px; 888888;*/} #content .wrapper {posity: ที่เกี่ยวข้อง: -webkit-transform-style: Preserve-3d; : 3px; : -webkit-gradient (เชิงเส้น, ด้านบนซ้าย, ด้านล่างซ้าย, หยุดสี (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 1, 117, 1 1, 117, 1 1, 1 1, 117, 1 1, 1 1, 1 1, 117, 1 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 1, 1 1, 117, 1)); 6s; 255, 255, 255, 0.5); แปลง: rotatex (95deg);} #content li: hover img {box-shadow: ไม่มี; , 0.3);CSS ได้รับการวิเคราะห์โดยทั่วไป อนุญาตให้ใช้ขั้นตอนการแบ่งปันผลิตภัณฑ์ทั้งหมดดังนั้นเราจึงเพิ่ม div.wapper สำหรับเขาเพื่อตั้งค่าการแปลง SYLE: Preverse-3D จากนั้นตั้งค่ามุมมองของเอฟเฟกต์เวทีแต่ละ li เอฟเฟกต์การพลิกสุดท้ายนั้นอยู่ที่ Div.wapper
ซอร์สโค้ดคลิกเพื่อดาวน์โหลด
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้