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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
bankjittapol
PHP Super Member
PHP Super Member
โพสต์: 344
ลงทะเบียนเมื่อ: 21/10/2019 10:19 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย bankjittapol »

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

Syntax ที่ใช้

โค้ด: เลือกทั้งหมด

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

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

โค้ด: เลือกทั้งหมด

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

โค้ด: เลือกทั้งหมด

  .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 4398 times
เป็นอย่างไรสำหรับคำสั่ง transform:rotate() ซึ่งสามารถนำไปปรับใช้กับหลายอย่างๆ เช่น ใส่กับ ปุ่ม หรือ โลโก้ เป็นต้น สามารถใช้เพิ่มลูกเล่นให้เว็บไซต์ของคุณดูน่าสนใจมากยิ่งขึ้น หวังว่าบทความนี้จะเป็นประโยชน์แก่ทุกท่านที่เข้ามาอ่านบทความนี้กันนะครับ


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

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



อ้างอิง
https://www.w3schools.com/cssref/css3_pr_transform.asp
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 36