Hướng dẫn dùng matrix translate trong PHP

Question

Hàm rewind() sẽ đặt lại vị trí con trỏ nội bộ của file về đầu file.

Nội dung chính Show

Kết quả trả về
Nội dung chính
2D Transform là gì?
Transform translate()
Transform rotate()
Transform scale()
Transform skewX()
Transform skewY()
Transform skew()
Transform matrix()

Hướng dẫn dùng matrix translate trong PHP

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:








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 đủ:









  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 đủ:









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);
}

0

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);
}

1

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);
}

2

Ví dụ:

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

3

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.198

#CSS

0 Bình luận

Sắp xếp theo

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

Bạn nên đọc

Những công nghệ 3D mới nhất của Đài Loan
Hướng dẫn tạo shortcut Windows Update trên Windows 10
Ngâm chân bằng lá lốt có tác dụng gì? Cách ngâm chân bằng lá lốt hiệu quả nhất
Asus EeePC 900, EeePC 901, EeePC 1000 mới
CEO Lenovo để ngỏ khả năng thâu tóm BlackBerry

CSS và CSS3

TOP code CSS xếp hạng sao (Star Rating) đẹp cho website

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
- Code mẫu
- 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: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam.

programming php

Hướng dẫn dùng matrix translate trong PHP

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

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội