ในการทำ User manual เราจะใช้ ภาพลูกศรภาพเดียว ในการบอกถึงทิศทาง โดยเราจะใช้ฟังก์ชัน flip(), rotate()
รูปข้างต้นจะเป็นลูกศรชี้ไปทางขวา ถ้าเราอยากได้ลูกศรที่ชี้ไปทางซ้าย เราจะใช้ฟังก์ชัน flip() ดังนี้
<style>
img.flip {
transform: scaleX(-1);
}
</style>
<img class="flip" src="left arrow.png">
img.flip {
transform: scaleX(-1);
}
</style>
<img class="flip" src="left arrow.png">
ในส่วนของการปรับให้รูปต้นแบบลูกศร เป็นขึ้นหรือลง จะใช้เป็นฟังก์ชัน rotate() ดังนี้
<style>
img.rotate90 {
transform: rotate(90deg);
}
img.rotate270 {
transform: rotate(270deg);
}
</style>
<img class="rotate90" src="left arrow.png" >
<img class="rotate270" src="left arrow.png">
ซึ่งในหน้า User Manual จะออกแบบได้เบื้องต้นดังภาพ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น