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

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

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

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

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


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

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



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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests