Page 1 of 1

CSS การใช้ rotate() เพื่อทำให้ icon หมุน เมื่อนำเมาส์ไปชี้

Posted: 29/11/2019 6:26 pm
by bankjittapol
CSS การใช้ rotate() เพื่อทำให้ icon หมุน เมื่อนำเมาส์ไปชี้
CSS คือ คำสั่งที่จัดการรูปแบบ หรือตกแต่งเอกสาร html หรือ xhtml เช่น เพิ่มสีข้อความ พื้นหลัง เพื่อรูปภาพ เป็นต้น ซึ่งต้องมีการกำหนดขนาดของแต่ละสิ่งที่อยู่ภายใน เอกสารนั้นๆ เช่นว่า ขนาดของข้อความ ขนาดของรูปภาพ ขนาดของหัวข้อ เป็นต้น
rotate() เป็นส่วนหนึ่งของ คำสั่ง CSS transform ซึ่งใช้ในการหมุน ซึ่งลักษณะการหมุนเป็น 2 มิติ หรือ 2D นั่นเอง โดยบทความนี้จะใช้ร่วมกับคำสั่ง :hover
:hover เป็นคำสั่งที่จะทำงานเมื่อเรานำเมาส์ไปชี้ หรือวางบนวัตถุต่างที่เรากำหนดคำสั่งนี้เข้าไป

Syntax ที่ใช้

Code: Select all

 transform:rotate(ค่าที่ต้องการ);
ตัวอย่าง

คำสั่งที่ใช้

Code: Select all

<div class="show-icon" ></div>
CSS ที่ใช้

Code: Select all

  .show-icon{
    background: url(img/icon.svg);
    margin: 5% 40% 0% 40%;
    background-size: 300px;
    width: 500px;
    height: 400px;
    overflow: hidden;
    background-repeat: no-repeat;
  }
.show-icon:hover{
  transition: all 1.0s;
  transform: rotate(360deg);
}
จากที่เห็น คือ กำหนดให้ icon มีการหมุน 360 องศา เมื่อทำการนำเมาส์มาชี้

ผลลัพธ์
5555.gif
5555.gif (555.34 KiB) Viewed 376 times
เป็นอย่างไรสำหรับคำสั่ง transform:rotate() ซึ่งสามารถนำไปปรับใช้กับหลายอย่างๆ เช่น ใส่กับ ปุ่ม หรือ โลโก้ เป็นต้น สามารถใช้เพิ่มลูกเล่นให้เว็บไซต์ของคุณดูน่าสนใจมากยิ่งขึ้น หวังว่าบทความนี้จะเป็นประโยชน์แก่ทุกท่านที่เข้ามาอ่านบทความนี้กันนะครับ


ศึกษาเพิ่มเติม
บทเรียน HTML5 (เอชทีเอ็มแอลห้า)
บทเรียน CSS (ซีเอสเอส)
เขียนโปรแกรม เบื้องต้น
บทความแชร์ความรู้ CSS

ท่านใดที่มีข้อสงสัยหรือติดปัญหาเกี่ยวกับ CSS และ HTML สามารถเขียนกระทู้ตั้งคำถามไว้ได้ที่
ถามตอบ HTML CSS



อ้างอิง
https://www.w3schools.com/cssref/css3_pr_transform.asp