ในตัวอย่างนี้การเขียน 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; 
}

อยากจะบอกแค่ว่า เนื้อหาเล็กๆ น้อยๆ นี้เป็นแค่ไอเดีย เพื่อให้หลายๆ คนที่สนใจเอาไปสร้างสรรค์ ดัดแปลง ทำต่อกันได้ หรือสามารถเอาไปประยุกต์กับเรื่องอื่นๆ อีกที