programming css

Trục z trong css có hướng

transform là thuộc tính cho phép dịch chuyển, thay đổi vị trí, hướng, chiều hoặc xoay thành phần, là một trong những thuộc tính đột phá trong CSS3.

Ứng dụng của transform rất lớn, tạo nên một bước ngoặc trong điều khiển giao diện, trước đây bạn chỉ có thể dùng hình ảnh cho những giao diện xoay trục, 3D hay thậm trí là dịch chuyển, hoặc đơn giản là ứng dụng trong hover thay đổi hình dạng của thành phần,... tất sẽ cả đơn giản hơn khi bạn biết

transform.

Cấu trúc

tag {
    transform: giá trị;
}

Giá trị của transform rất nhiều, bài học này chủ yểu cho bạn biết cách sử dụng nên sẽ giới thiệu vài giá trị thường dùng, những giá trị khác bạn có thể tìm hiểu ở phần tham khảo thuộc tính transform.

Giá trịĐơn vịVDMô tảrotate[angle]Độrotate[45deg]Định nghĩa một phép quay 2D với góc được xác định bởi tham số angle.rotateX[angle]ĐộrotateX[45deg]Định nghĩa một phép quay 3D dọc theo trục X, cần dùng kết hợp với giá trị perspective.rotateY[angle]ĐộrotateY[45deg]Định nghĩa một phép quay 3D dọc theo trục Y, cần dùng kết hợp với giá trị perspective.rotateZ[angle]ĐộrotateZ[45deg]Định nghĩa một phép quay 3D dọc theo trục Z, cần dùng kết hợp với giá trị perspective.scale[x,y]Số thập phânscale[1.5,2]Xác định một biến đổi tỷ lệ.scaleX[x]Số thập phânscale[1.5]Xác định một biến đổi tỷ lệ theo trục X.scaleY[y]Số thập phânscale[1.5]Xác định một biến đổi tỷ lệ theo trục Y.skew[x-angle,y-angle]Độskew[10deg,10deg];Xác định sự biến đổi nghiêng 2D dọc theo trục X và Y.skewX[x-angle]ĐộskewX[10deg];Xác định sự biến đổi nghiêng 2D dọc theo trục X.skewY[y-angle]ĐộskewY[10deg];Xác định sự biến đổi nghiêng 2D dọc theo trục Y.translate[x,y]px, em, ...translate[10px,20px];Xác định một dịch chuyển 2D.translateX[x]px, em, ...translateX[10px];Xác định một dịch chuyển 2D theo trục X.translateY[y]px, em, ...translateY[10px];Xác định một dịch chuyển 2D theo trục Y.perspective[px]px, em, ...perspective[10px];Giá trị cần cho biến đổi 3D.

Cách sử dụng

HTML viết:





transform

CSS viết - khi chưa sử dụng transform:

p {
    background: #7ACAFF;
    height: 100px;
    width: 100px;
}

Hiển thị trình duyệt:

Ta sẽ xem xét vài giá trị của transform để hiểu hơn về thuộc tính này nhé:

CSS viết:

p {
    background: #7ACAFF;
    height: 50px;
    transform: rotate[45deg];
    width: 120px;
}

Hiển thị trình duyệt:

Kết quả cho ta thấy, thành phần p hiện tại đã được xoay một góc 45 độ, các bạn xem thêm một vài ví dụ bên dưới nhe:

Ví dụ thêm - Một số transform thường dùng

Dịch chuyển dọc

p {
    background: #7ACAFF;
    height: 50px;
    transform: translateX[100px];
    width: 120px;
}

Biến đổi nghiên theo trục X

p {
    background: #7ACAFF;
    height: 50px;
    transform: skewX[30deg];
    width: 120px;
}

Các giá trị khác, bạn có thể xem thêm tại tham khảo transform hoặc sử dụng công cụ tạo transform để khám phá nhiều tính năng hơn.

Trang chủ
Tham khảo
CSS
CSS3
Thuộc tính transform

Định nghĩa và sử dụng

Thuộc tính transform xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ...

Transform trong CSS là những thuộc tính dùng để "biến hình" cho các phần tử ban đầu, cho phép chúng ta thay đổi vị trị, hình dáng hay xoay phần tử theo các chiều.

Có 2 kiểu thường gặp là 2D and 3D transformation.

[Transformation là cách gọi chung của hiệu ứng thay đổi hình dạng, kích thước và vị trí của phần tử]

Ở bài viết này, Quantrimang.com sẽ cùng bạn tìm hiểu về 2D Transform, các giá trị, cách sử dụng cũng như những ví dụ cụ thể nhất để bạn dễ dàng hình dung.

Nội dung chính

2D Transform
Transform translate[]
Transform rotate[]
Transform scale[]
Transform skewX[]
Transform skewY[]
Transform skew[]
Transform matrix[]

2D Transform là gì?

2D Transform là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D.

Cú pháp để tạo transform như sau:

transform: value;

Các giá trị thường được sử dụng là translate[], rotate[], scale[], skewX[], skewY[], matrix[]. Cụ thể như sau:

Giá trịMô tảtranslate[x,y]Di chuyển phần tử theo trục x và trục ytranslateX[n]Di chuyển phần tử theo trục xtranslateY[n]Di chuyển phần tử theo trục yscale[x,y]Thay đổi độ rộng và chiều cao của phần tửscaleX[n]Thay đổi độ rộng của phần tửscaleY[n]Thay đổi chiều cao của phần tửrotate[angle]Xoay phần tử theo một góc [angle]skew[x-angle,y-angle]Định dạng phần tử nghiêng theo một gócskewX[angle]Định dạng phần tử nghiêng một góc theo trục xskewY[angle]Định dạng phần tử nghiêng một góc theo trục ymatrix[n,n,n,n,n,n]Tổng hợp giữa scale, skew và translate

Transform translate[]

Translate[] di chuyển một phần tử từ vị trí hiện tại của nó với các tham số đã cho theo trục X và trục Y. X là dịch theo chiều ngang còn Y là dịch theo chiều dọc.

Ví dụ: Di chuyển phần tử

sang phải 100 pixel, lui xuống dưới 50 pixel từ vị trí hiện tại

div {
  -ms-transform: translate[100px,50px]; /* IE 9 */
  -webkit-transform: translate[100px,50px]; /* Safari */
  transform: translate[100px,50px];
}

Hình gốc :

[*Các ví dụ trong bài viết đều được transform từ hình này]

Hình đã được dịch chuyển:




 
div {
  width: 300px;
  height: 100px;
  background-color: LightSalmon;
  color: #58257b;
  border: 3px solid #58257b;
  -ms-transform: translate[100px,50px]; /* IE 9 */
  -webkit-transform: translate[100px,50px]; /* Safari */
  transform: translate[100px,50px]; /* Standard syntax */
}




Website Quản Trị Mạng

Transform rotate[]

Rotate[] trong Transform CSS sử dụng để xoay một phần tử theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ theo một góc nhất định, đơn vị sử dụng là degree [deg]. Góc dương thì xoay theo chiều kim đồng hồ, góc âm thì người lại.

Ví dụ: Xoay phần tử

theo chiều kim đồng hồ 20 deg:

div {
  -ms-transform: rotate[20deg]; /* IE 9 */
  -webkit-transform: rotate[20deg]; /* Safari */
  transform: rotate[20deg];
}

Code đầy đủ:





div {
  width: 300px;
  height: 100px;
  background-color: LightSalmon;
  color: #58257b;
  border: 3px solid #58257b;
}

div#myDiv {
  -ms-transform: rotate[20deg]; /* IE 9 */
  -webkit-transform: rotate[20deg]; /* Safari */
  transform: rotate[20deg];
}





  Website Quản Trị Mạng



  Website Quản Trị Mạng

Transform scale[]

Scale[] sử dụng để thay đổi độ rộng và chiều cao của phần tử. Hiểu một cách đơn giản là bạn có thể zoom phần tử to lên hoặc nhỏ lại tùy ý, với x là zoom chiều ngang và y là zoom chiều dọc. Scale không có đơn vị mà tính theo tỉ lệ với phần tử gốc, ví dụ 1 là giữ nguyên 2 là tăng lên gấp đôi, 3 là tăng gấp 3...

Ví dụ: Tăng phần tử

lên gấp hai lần chiều rộng và ba lần chiều cao ban đầu của nó

div {
  -ms-transform: scale[1.5,2]; /* IE 9 */
  -webkit-transform: scale[1.5,2]; /* Safari */
  transform: scale[1.5,2];
}

Code đầy đủ:





div {
  margin: 90px;
  width: 300px;
  height: 100px;
  background-color: LightSalmon;
  color: #58257b;
  border: 3px solid #58257b;
}

div#myDiv {
  -ms-transform: scale[2,3]; /* IE 9 */
  -webkit-transform: scale[2,3]; /* Safari */
  transform: scale[1.5,2]; /* Standard syntax */
}





Website Quản Trị Mạng



Website Quản Trị Mạng

Transform skewX[]

SkewX[] làm nghiêng một phần tử theo trục X với góc truyền vào.

Ví dụ: Nghiêng phần tử

30 độ theo trục X:

div {
  -ms-transform: skewX[30deg]; /* IE 9 */
  -webkit-transform: skewX[30deg]; /* Safari */
  transform: skewX[30deg];
}

skewX[30deg]

skewX[-30deg]

Transform skewY[]

SkewY[] làm nghiêng một phần tử theo trục Y với góc truyền vào.

Ví dụ: Nghiêng phần tử

30 độ theo trục Y:

div {
  -ms-transform: skewY[30deg]; /* IE 9 */
  -webkit-transform: skewY[30deg]; /* Safari */
  transform: skewY[30deg];
}

skewY[30deg]

skewY[-30deg]

Transform skew[]

Skew[] là sự kết hợp của cả skewX và skewY, làm nghiêng một phần tử theo cả trục X và Y với góc truyền vào.

Ví dụ: Nghiêng phần tử

30 độ theo trục X và 10 độ theo trục Y.

div {
  -ms-transform: skew[30deg, 10deg]; /* IE 9 */
  -webkit-transform: skew[30deg, 10deg]; /* Safari */
  transform: skew[30deg, 10deg];
}

Code đầy đủ:

div {
  -ms-transform: translate[100px,50px]; /* IE 9 */
  -webkit-transform: translate[100px,50px]; /* Safari */
  transform: translate[100px,50px];
}

Nếu tham số thứ hai trong skew[] không được chỉ định, chương trình sẽ tự động hiểu số đó là x còn y sẽ có giá trị là 0. Vậy ví dụ sau sẽ nghiêng phần tử

20 độ theo trục X:

div {
  -ms-transform: translate[100px,50px]; /* IE 9 */
  -webkit-transform: translate[100px,50px]; /* Safari */
  transform: translate[100px,50px];
}

Transform matrix[]

Matrix[] là kết hợp của tất cả các phương thức 2D Transform, tổng hợp của scale, skew và translate. Matrix[] có sáu tham số, chứa các hàm cho phép bạn xoay, zoom và di chuyển phần tử.

Cú pháp của matrix:

div {
  -ms-transform: translate[100px,50px]; /* IE 9 */
  -webkit-transform: translate[100px,50px]; /* Safari */
  transform: translate[100px,50px];
}

Ví dụ:

div {
  -ms-transform: translate[100px,50px]; /* IE 9 */
  -webkit-transform: translate[100px,50px]; /* Safari */
  transform: translate[100px,50px];
}

Bài trước: Sử dụng Web Font trong CSS

Bài tiếp: 3D Transform trong CSS

Thứ Ba, 07/05/2019 11:39

4,7 ★ 6 👨 13.013

#CSS

0 Bình luận

Sắp xếp theo

Xóa Đăng nhập để Gửi

Bạn nên đọc

Máy tính Mac dính lỗ hổng bảo mật nguy hiểm, Apple được thông báo từ tháng 2 nhưng vẫn chưa khắc phục
Cách tự động xóa cookies trên Chrome khi thoát trình duyệt
Tablet HTC Flyer giá khởi điểm hơn 14 triệu đồng
Cách sử dụng ghi chú người thuyết trình trong Google Slides
500px trở lại App Store sau khi chỉnh sửa

CSS và CSS3

Thuộc tính FLOAT và CLEAR trong CSS
Rounded Corner trong CSS
Truy vấn Media trong CSS
Thuộc tính Display [inline-block] trong CSS
Tìm hiểu sâu về Color trong CSS
Hiệu ứng chuyển đổi Transition trong CSS

Xem thêm

CSS và CSS3

CSS cơ bản
- Giới thiệu CSS
- Cú pháp và Selector CSS
- Vị trí đặt CSS
- CSS - Color
- CSS - Background
- CSS - Border
- CSS - Margin
- CSS - Padding
- CSS - Width và Height
- CSS - Box Model
- CSS - Outline
- CSS - Text
- CSS - Font
- CSS - Icon
- CSS - Link
- CSS - Tạo List
- CSS - Table
- CSS - Display
- CSS - Max-width
- CSS - Position
- CSS - Overflow
- CSS - Float và Clear
- CSS - Inline-block
- CSS - Align
- CSS - Combinator
- CSS - Pseudo-Class
- CSS - Pseudo-Element
- CSS - Opacity
- CSS - Navigation Bar
- CSS - Dropdown
- CSS - Image Gallery
- CSS - Image Sprite
- CSS - Attribute Selector
- CSS - Form
- CSS - Counter
- CSS - Layout
- CSS - Unit
- CSS - Specificity
CSS nâng cao
- CSS - Rounded Corner
- CSS - Border Image
- CSS - Multiple Background
- CSS - Color
- CSS - Gradient
- CSS - Shadow Effect
- CSS - Text Effect
- CSS - Web Font
- CSS - 2D Transform
- CSS - 3D Transform
- CSS - Transition
- CSS - Animation
- CSS - Tooltip
- CSS - Flexbox
- CSS - Button
- CSS- @media
- Tạo hiệu ứng hover nút bằng CSS

Công nghệ
- Ứng dụng
- Hệ thống
- Game - Trò chơi
- iPhone
- Android
- Linux
- Nền tảng Web
- Đồng hồ thông minh
- Chụp ảnh - Quay phim
- macOS
- Phần cứng
- Thủ thuật SEO
- Kiến thức cơ bản
- Raspberry Pi
- Dịch vụ ngân hàng
- Lập trình
- Dịch vụ công trực tuyến
- Dịch vụ nhà mạng
- Nhà thông minh
Download
- Ứng dụng văn phòng
- Tải game
- Tiện ích hệ thống
- Ảnh, đồ họa
- Internet
- Bảo mật, Antivirus
- Họp, học trực tuyến
- Video, phim, nhạc
- Mail
- Lưu trữ đám mây
- Giao tiếp, liên lạc, hẹn hò
- Hỗ trợ học tập
- Máy ảo
Tiện ích
Khoa học
- Khoa học vui
- Khám phá khoa học
- Bí ẩn - Chuyện lạ
- Chăm sóc Sức khỏe
- Khoa học Vũ trụ
- Khám phá thiên nhiên
Điện máy
- Tủ lạnh
- Tivi
- Điều hòa
- Máy giặt
Cuộc sống
- Kỹ năng
- Món ngon mỗi ngày
- Làm đẹp
- Nuôi dạy con
- Chăm sóc Nhà cửa
- Kinh nghiệm Du lịch
- Halloween
- Mẹo vặt
- Giáng sinh - Noel
- Tết 2023
- Quà tặng
- Giải trí
- Là gì?
- Nhà đẹp
- TOP
- Phong thủy
Video
- Công nghệ
- Cisco Lab
- Microsoft Lab
- Video Khoa học
Ô tô, Xe máy
- Giấy phép lái xe
Làng Công nghệ
- Tấn công mạng
- Chuyện công nghệ
- Công nghệ mới
- Trí tuệ nhân tạo [AI]
- Anh tài công nghệ
- Bình luận công nghệ
- Tổng hợp
Học CNTT
- Quiz công nghệ
- Microsoft Word 2016
- Microsoft Word 2013
- Microsoft Word 2007
- Microsoft Excel 2019
- Microsoft Excel 2016
- Hàm Excel
- Microsoft PowerPoint 2019
- Microsoft PowerPoint 2016
- Google Sheets - Trang tính
- Photoshop CS6
- Photoshop CS5
- HTML
- CSS và CSS3
- Python
- Học SQL
- Lập trình C
- Lập trình C++
- Lập trình C#
- Học HTTP
- Bootstrap
- SQL Server
- JavaScript
- Học PHP
- jQuery
- Học MongoDB
- Unix/Linux
- Học Git
- NodeJS

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: info@meta.vn. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

Cấu trúc

Cách sử dụng

Ví dụ thêm - Một số transform thường dùng

Định nghĩa và sử dụng

Nội dung chính

2D Transform là gì?

Transform translate[]

Website Quản Trị Mạng

Transform rotate[]

Website Quản Trị Mạng

Website Quản Trị Mạng

Transform scale[]

Website Quản Trị Mạng

Website Quản Trị Mạng

Transform skewX[]

Transform skewY[]

Transform skew[]

Transform matrix[]

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề