CSS คือ คำสั่งที่จัดการรูปแบบ หรือตกแต่งเอกสาร html หรือ xhtml เช่น เพิ่มสีข้อความ พื้นหลัง เพื่อรูปภาพ เป็นต้น ซึ่งต้องมีการกำหนดขนาดของแต่ละสิ่งที่อยู่ภายใน เอกสารนั้นๆ เช่นว่า ขนาดของข้อความ ขนาดของรูปภาพ ขนาดของหัวข้อ เป็นต้น
rotate() เป็นส่วนหนึ่งของ คำสั่ง CSS transform ซึ่งใช้ในการหมุน ซึ่งลักษณะการหมุนเป็น 2 มิติ หรือ 2D นั่นเอง โดยบทความนี้จะใช้ร่วมกับคำสั่ง :hover
:hover เป็นคำสั่งที่จะทำงานเมื่อเรานำเมาส์ไปชี้ หรือวางบนวัตถุต่างที่เรากำหนดคำสั่งนี้เข้าไป
Syntax ที่ใช้
โค้ด: เลือกทั้งหมด
transform:rotate(ค่าที่ต้องการ);
คำสั่งที่ใช้
โค้ด: เลือกทั้งหมด
<div class="show-icon" ></div>
โค้ด: เลือกทั้งหมด
.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);
}
ผลลัพธ์ เป็นอย่างไรสำหรับคำสั่ง transform:rotate() ซึ่งสามารถนำไปปรับใช้กับหลายอย่างๆ เช่น ใส่กับ ปุ่ม หรือ โลโก้ เป็นต้น สามารถใช้เพิ่มลูกเล่นให้เว็บไซต์ของคุณดูน่าสนใจมากยิ่งขึ้น หวังว่าบทความนี้จะเป็นประโยชน์แก่ทุกท่านที่เข้ามาอ่านบทความนี้กันนะครับ
ศึกษาเพิ่มเติม
บทเรียน HTML5 (เอชทีเอ็มแอลห้า)
บทเรียน CSS (ซีเอสเอส)
เขียนโปรแกรม เบื้องต้น
บทความแชร์ความรู้ CSS
ท่านใดที่มีข้อสงสัยหรือติดปัญหาเกี่ยวกับ CSS และ HTML สามารถเขียนกระทู้ตั้งคำถามไว้ได้ที่
ถามตอบ HTML CSS
อ้างอิง
https://www.w3schools.com/cssref/css3_pr_transform.asp