ก็ย้อนจากวันนี้ไปประมาณ 9 เดือน ซึ่งตอนนั้นผมเขียน และทดลองเล่นดู ปรากฎว่า มีบราวเซอร์รองรับแค่ 2 ตัว คือ Chromeและ Safari ซึ่งเป็น Webkit ทั้งคู่ จึงพับเก็บเอาไว้ก่อนไม่ได้เขียนอธิบายลงเว็บ

อย่างที่กล่าวมาข้างต้น ผมอัพเดท Firefox แล้ว และสามารถใช้ได้ จึงกลับไปงัดตัวอย่างง่อยๆ นี้ออกมา

ในตัวอย่างนี้การเขียน CSS หลักๆ ประกอบไปด้วย CSS Transitions มี CSS 2D Transformations รวมไปถึง CSS Backgrounds and Borders แถมด้วย CSS Selectors นิดหน่อย

ดู ตัวอย่างการทำแผนที่แบบง่ายๆ ด้วย CSS3 Transitions

บทความที่เกี่ยวข้องกัน แนะนำให้อ่านก่อนเพื่อเพิ่มความเข้าใจ

1. CSS3 Background
2. nth-child() และ not() ใน CSS Selectors
3. จาก CSS3 Transform ถึง CSS Motion Editor Designer

บทความนี้ จะคล้ายกับบทความเรื่อง HTML5 กับ CSS3 เมื่อเอามาทำ Photo Gallery เพราะมีการใช้ transition เหมือนกัน

สิ่งที่ทำให้ พื้นหลังที่เป็นรูปตึก ขยายและเลื่อนได้นั่นอยู่ที่ background-position และ  background-size ซึ่ง สองตัวนี้ ทูกทำให้เปลี่ยนค่าเมื่อเกิดการ Click ลงที่ <a> ที่มี href ชี้ไปที่ <blockquote> ที่มี id นั้นๆ อยู่ เมื่อเกิดเหตุการณ์แบบนี้ขึ้นที่ HTML ทางฝั่ง CSS เรียกว่า การโดน :target (Selector) ซึ่งเมื่อถูก :target แล้วไปไหนก็ให้สั่งการใน Property ของ CSS เองอีกทอดหนึ่ง เช่นคำสั่ง

 blockquote#sk:target~div { 
background-position: -100px -1200px !important; 
background-size: 140%; 
} 
blockquote#home:target { 
top: 145px; 
left: 480px; 
} 

ส่วนในกรณีที่ไม่ถูก :target เราก็สามารถเขียนแก้กลับได้ด้วย

 .bg>blockquote:not(:target) { 
z-index: -1; 
opacity: 0; 
}