Transform CSS3 Generator: Scale, Rotate, Translate và Skew

CSS3.0 Transform

Trình tạo CSS Transform dành cho những người lười biếng.

Đặt tỷ lệ, xoay, dịch và nghiêng và xem bản xem trước trực tiếp để có được chế độ xem mong muốn.

Tránh đặt các giá trị cực đoan cho thuộc tính xiên vì bản xem trước có thể che bảng cài đặt. Trong tình huống này, bạn sẽ phải làm mới trang.

 

Quy mô, xoay, dịch và xiên

Quy mô hoạt động giống như bạn phóng to và thu nhỏ phần tử được nhắm mục tiêu. Giá trị tỷ lệ mặc định là 1, giá trị này hoạt động như một hệ số nhân của kích thước ban đầu. Điều này có nghĩa là 0,5 phân nửa trong khi 2 nhân đôi phần.

 

Xoay phần tử theo chiều kim đồng hồ với thuộc tính thứ hai được đặt theo độ. Quay 180 ° sẽ đặt đối tượng lộn ngược trong khi quay 360 ° trở lại vị trí thẳng đứng ban đầu. Đặt bất kỳ giá trị dương hoặc âm hoặc thậm chí cả số thập phân.

 

Dịch chuyển phần tử có các pixel liên quan đến vị trí ban đầu của nó. Giá trị X theo chiều ngang trong khi Y theo chiều dọc khi có thuộc tính xoay bằng không.

 

Xiên các đối tượng trên trục ngang (X) hoặc dọc (Y) của chúng.

 

Giải thích về chuyển đổi CSS 

Thuộc tính CSS chuyển đổi cho phép bạn xoay, chia tỷ lệ, nghiêng và dịch một phần tử. Nó sửa đổi không gian tọa độ của mô hình định dạng trực quan CSS.

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

Thuộc tính biến đổi áp dụng chuyển đổi 2D hoặc 3D cho một phần tử. Thuộc tính này cho phép bạn xoay, chia tỷ lệ, di chuyển, xiên, v.v., các phần tử.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Các số theo sau -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.

Cú pháp
transform: none|transform-functions|initial|inherit;