วิธีง่ายๆ ในการหมุนองค์ประกอบของหน้าเว็บไซต์ เพียงใช้สไตล์ CSS สองสามแบบ การทำความคุ้นเคยกับบทเรียนนี้จะทำให้คุณสามารถวางพัดการ์ดที่กางออก ใบไม้ที่ร่วงหล่น หรือรูปถ่ายที่มีสไตล์ลงในอัลบั้มบนหน้า บทเรียนประกอบด้วยตัวอย่างการใช้งานอัลบั้มรูปและพิจารณาวิธีแก้ปัญหาสำหรับเบราว์เซอร์สมัยใหม่ทั้งหมด
มันจำเป็น
ภาพถ่ายสี่ภาพที่มีความกว้างสูงสุด 450px
คำแนะนำ
ขั้นตอนที่ 1
ตัวอย่างนี้จะเน้นที่การสร้างหน้าอัลบั้มที่มีสไตล์ด้วยรูปภาพที่หมุน
ฉันเตรียมรูปภาพล่วงหน้า (กว้าง 400px) พร้อมที่อยู่:
ในอนาคต เราจะกำหนด ID ให้กับรูปภาพตามชื่อของพวกเขา
ขั้นตอนที่ 2
ขั้นแรก เราจะเตรียมบล็อกสำหรับอัลบั้มรูปภาพของเราโดยใช้แท็ก div และเพิ่มรูปภาพเข้าไปโดยใช้แท็ก img (แต่ละรูปภาพจะต้องอยู่ในแท็ก div ของตัวเอง) ดังนี้:
โปรดทราบว่าเราได้กำหนดตัวระบุให้กับบล็อก - โดยตัวระบุ เราสามารถอ้างถึงบล็อกโดยใช้ css
ขั้นตอนที่ 3
ถัดไป คุณต้องตั้งค่าสไตล์ css ให้กับบล็อก รายการรูปแบบ: "ตำแหน่ง: ญาติ" - จะกำหนดจุดเริ่มต้นจากมุมบนซ้ายของบล็อกของเรา "ระยะขอบ: อัตโนมัติ 50px;" - จะตั้งค่าการเยื้องของบล็อก "50px" ด้านบนและด้านล่างส่วนที่เหลือของเนื้อหาหน้า ตลอดจนตั้งค่าการเยื้องอัตโนมัติไปทางขวาและซ้าย ซึ่งจะทำให้บล็อกของเราอยู่ตรงกลาง "ความกว้าง: 900px; ความสูง: 650px;" - จะกำหนดความกว้างเป็น 900px และความสูงเป็น 650px ตามลำดับ
ต้องวางรายการสไตล์ที่ระบุในลักษณะนี้:
#photo_page {
ตำแหน่ง: ญาติ;
ระยะขอบ: 0 อัตโนมัติ;
ความกว้าง: 900px;
ความสูง: 650px;
จัดข้อความ: ศูนย์;
}
สังเกตการใช้ "#photo_page" - นี่คือวิธีที่เราอ้างถึง ID บล็อก
ขั้นตอนที่ 4
ตอนนี้เราจะกำหนดรูปแบบทั่วไปสำหรับแต่ละภาพภายในบล็อก photo_page เหล่านี้คือมุมมน ขอบสีเทา พื้นหลังสีขาว ช่องว่างภายใน และเงา
สิ่งนี้จะสร้างเอฟเฟกต์การถ่ายภาพ:
#photo_page img {
รัศมีเส้นขอบ: 7px;
เส้นขอบ: 1px สีเทาทึบ;
พื้นหลัง: #ffffff;
ช่องว่างภายใน: 10px;
กล่องเงา: 2px 2px 10px # 697898;
}
สังเกตการใช้ "#photo_page img" - นี่จะหมายถึงภาพทั้งหมดภายใน photo_page block
ขั้นตอนที่ 5
สิ่งสำคัญคือต้องเพิ่มสไตล์สั้น ๆ เช่นนี้:
#photo_page div {
ลอย: ซ้าย;
}
มันย่อบล็อกทั้งหมดภายในบล็อก photo_page ไปทางซ้าย
ขั้นตอนที่ 6
ขั้นกลางของบทเรียนเสร็จสมบูรณ์แล้ว หากงานของคุณคล้ายกับภาพในภาพหน้าจอ แสดงว่าคุณไม่ได้ทำผิดพลาดและสามารถไปยังขั้นตอนต่อไปได้
ขั้นตอนที่ 7
ตอนนี้เราหันไปหมุนรูปภาพที่โพสต์ สำหรับสิ่งนี้ เราต้องการรูปแบบการแปลงร่าง ขณะนี้ไม่ได้ใช้ในรูปแบบบริสุทธิ์ แต่มีคำนำหน้าสำหรับแต่ละเบราว์เซอร์ในตอนเริ่มต้นเช่นนี้:
-webkit-transform: หมุน (ค่า);
-moz-transform: หมุน (ค่า);
-o-transform: หมุน (ค่า);
นี่คือรูปแบบการหมุนสำหรับเบราว์เซอร์: Google Chrome, Mazilla, Opera (ตามลำดับ) แทนที่จะใส่คำว่า "value" เราจะใส่ตัวเลขที่มี deg ต่อท้ายดังนี้:
90deg - หมุน 90 องศาตามเข็มนาฬิกา
-5deg - หมุน -5 องศาทวนเข็มนาฬิกา
เป็นต้น
ขั้นตอนที่ 8
รูปแบบสำหรับภาพถ่าย_1:
# photo_1 {
-webkit-transform: หมุน (5deg);
-moz-transform: หมุน (5deg);
-o-transform: หมุน (5deg);
}
ภาพแรกหมุน 5 องศา
ขั้นตอนที่ 9
รูปแบบสำหรับรูปภาพ_2:
# รูปภาพ_2 {
-webkit-transform: หมุน (-3deg);
-moz-transform: หมุน (-3deg);
-o-transform: หมุน (-3deg);
}
ภาพที่สองหมุน -3 องศา
ขั้นตอนที่ 10
รูปแบบสำหรับภาพถ่าย_3:
# รูปภาพ_3 {
-webkit-transform: หมุน (-2deg);
-moz-transform: หมุน (-2deg);
-o-transform: หมุน (-2deg);
}
ภาพที่สามหมุน -2 องศา
ขั้นตอนที่ 11
รูปแบบสำหรับภาพถ่าย_4:
# photo_4 {
-webkit-transform: หมุน (8deg);
-moz-transform: หมุน (8deg);
-o-transform: หมุน (8deg);
}
ภาพที่สี่หมุน 8 องศา
ขั้นตอนที่ 12
มาดูกันว่าคุณจะแก้ไขตำแหน่งของภาพได้อย่างไร ตัวอย่างเช่น คุณต้องการออฟเซ็ตรูปภาพแรก 20px จากด้านบนและ 10px จากด้านซ้าย ในกรณีนี้ คุณต้องใช้รูปแบบระยะขอบ นี่เป็นวิธีที่ถูกต้องสำหรับกรณีของเรา:
# photo_1 {
ระยะขอบ: 20px -10px -20px 10px;
-webkit-transform: หมุน (5deg);
-moz-transform: หมุน (5deg);
-o-transform: หมุน (5deg);
}
โปรดทราบว่าค่าแรกของรูปแบบคือระยะขอบบน ที่สองคือการเยื้องทางด้านขวา ที่สามคือการเยื้องจากด้านล่าง ที่สี่ - เยื้องซ้าย
สำคัญ: ในกรณีของเรา ระยะขอบด้านล่างเท่ากับค่าลบของระยะขอบบนหากคุณเห็นพื้นที่สีขาวด้านล่างรูปภาพบนหน้าเว็บของคุณ ให้พยายามเยื้องด้านล่างของรูปภาพในเชิงลบมากขึ้น
ขั้นตอนที่ 13
งานเสร็จสมบูรณ์ ฉันให้ภาพหน้าจอ (โดยคำนึงถึงการเปลี่ยนแปลงในการเยื้องของภาพแรกที่อธิบายไว้ในขั้นตอนที่ 12)
เพิ่มรูปแบบการเยื้องให้กับรูปภาพที่ไม่อยู่ในตำแหน่งที่เหมาะกับคุณ