Xoay Phần Tử Với Thuộc Tính Transform Rotate Trong CSS | DEVMASTER

Đang load dữ liệu

• Trang chủ
• Các khoá đào tạo

  • Chuyên đề WEB - PHP

    • Lập trình web với HTML5 - CSS3- JQuery - Bootstrap - Ajax - [36 giờ]
    • Lập trình web frontend - reactjs - [75 giờ]
    • Lập trình web với mã nguồn mở PHP&MYSQL - PHP FRAMEWORK [126 giờ]

    Chuyên đề Mobile

    • Lập trình Games/Apps trên nền tảng Android - [120 giờ]
    • Lập trình Games/Apps trên nền tảng IOS - [120 giờ]

    Chuyên đề JAVA

    • Ngôn ngữ lập trình hướng đối tượng với java - [40 giờ]
    • Lập trình ứng dụng với java - [100 giờ]
    • Lập trình web site với java framework (JPA, HIBERNATE, SPRING MVC, SPRINGBOOT) - [276 giờ]

    Chuyên đề NETWORK/SECURITY

    • Khoá học Quản trị hạ tầng mạng CCNA v6 - [72 giờ]
    • Khoá học quản trị hệ thống với Windows SERVER 2012- [72 giờ]
    • Chuyên gia bảo mật hệ thống CompTIA + - [110 giờ]

    Chuyên đề .NET

    • Nền tảng lập trình hướng đối tượng với C# - [40 giờ]
    • Lập trình ứng dụng WINDOWS FORM - [100 giờ]
    • Lập trình Web với ASP.NET MVC 5, WebAPI - [145 giờ]

    Chuyên đề khác

    • Ngôn ngũ lập trình C/C++ - [80 giờ]
• Lập trình cho trẻ em
• Dịch vụ
  • Đào tạo theo như cầu
  • Cung cấp thiết bị - Phần mềm
  • Tư vấn - Thiết kế mạng hạ tầng
  • Tư vấn - Triển khai dịch vụ mạng
  • Tư vấn - Tư vấn, triển khai giám sát hệ thống
  • Thực tập dự án
• Lịch khai giảng
• Tin tức
  • Tin tức và sự kiện
  • Tin hoạt động
  • Tin công nghệ
  • Hội thảo, workshop, Codecam
  • Thông tin việc làm
  • Cẩm nang chia sẻ kiến thức
• Tiện ích
• Liên hệ

Cẩm nang chia sẻ kiến thức

Oct - 2020 30 Xoay phần tử với thuộc tính transform rotate trong CSS Cẩm nang chia sẻ kiến thức

Để xoay một phần tử hay hình ảnh trong CSS chúng ta sẽ sử dụng thuộc tính transform (rotate) theo cú pháp transform: rotate(1turn);

Trong đó 1turn có nghĩa là phần tử sẽ xoay 360 độ theo chiều kim đồng hồ . Để hiểu thêm thuộc tính này, các bạn xem ví dụ dưới này nhé:

Ở đây, mình thêm hình ảnh với đoạn code HTML bên dưới:

Nếu muốn xoay hình ảnh 360 độ thì chúng ta thêm thuộc tính transform trong style là được.

Note: ease-out là hiệu ứng chuyển đổi chậm ở lúc kết thúc

Kết quả các bạn xem demo này nhé: Xoay hình ảnh trong CSS

Nguồn: Devmaster Academy

Các bài viết cùng chủ đề

BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI... 5 Phương pháp hay để mở rộng các dự án React của b... Lab06.1 - Data Access In ASPNET MVC 5 Lab05 - Data Validation and Annotation In ASPNET M... Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hàn... Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2

Các khóa đào tạo chuyên đề

	Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
	Lập trình ứng dụng trên nền tảng android
	Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
	Lập trình ứng dụng với WINDOWS FORM
	Lập trình ứng dụng với JAVA (FORM)
	Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
	Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
	Lập trình frontend với reacjs (Full)