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

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

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];
}
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,76 👨 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ới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA

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.

Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép.

Chủ Đề