programming css

Kiểu biến đổi trong css

Thuộc tính CSS

transform-style = 
  flat         |
  preserve-3d

7 đặt các phần tử con của một phần tử được định vị trong không gian 3D hay được làm phẳng trong mặt phẳng của phần tử

Thử nó

Nếu bị làm phẳng, các phần tử con của phần tử sẽ không tồn tại một mình trong không gian 3D

Vì thuộc tính này không được kế thừa nên nó phải được đặt cho tất cả các phần tử con không phải là lá của phần tử

cú pháp

/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;

giá trị

transform-style = 
  flat         |
  preserve-3d

Cho biết các phần tử con nằm trong mặt phẳng của chính phần tử đó

transform-style = 
  flat         |
  preserve-3d

Chỉ ra rằng phần tử con của phần tử nên được định vị trong không gian 3D

định nghĩa chính thức

Giá trị ban đầu

transform-style = 
  flat         |
  preserve-3d

8Áp dụng cho các phần tử có thể chuyển đổiKế thừakhôngGiá trị tính toánnhư đã chỉ địnhKiểu hoạt ảnhrời rạcTạo bối cảnh xếp chồngcó

cú pháp chính thức

transform-style = 
  flat         |
  preserve-3d

ví dụ

Chuyển đổi phong cách trình diễn

Trong ví dụ này, chúng ta có một khối lập phương 3D được tạo bằng cách sử dụng các phép biến đổi. Theo mặc định, bộ chứa chính của các mặt khối lập phương đã đặt

transform-style = 
  flat         |
  preserve-3d

1 trên đó, do đó, nó được chuyển đổi trong không gian 3D và bạn có thể thấy nó như dự kiến

Chúng tôi cũng cung cấp một hộp kiểm cho phép bạn chuyển đổi giữa điều này và

transform-style = 
  flat         |
  preserve-3d

0. Ở trạng thái thay thế này, tất cả các mặt của khối lập phương đều được làm phẳng trên mặt phẳng của mặt phẳng cha và bạn có thể hoàn toàn không nhìn thấy chúng, tùy thuộc vào trình duyệt bạn đang sử dụng

Transform in CSS là 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í giá trị, hình dạng hoặc xoay phần tử theo các chiều

Có 2 kiểu thường gặp là chuyển đổi 2D và 3D

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

At this post, 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ễ hình dung

Nội dung chính

Chuyển đổi 2D
Chuyển đổi dịch[]
Chuyển đổi xoay[]
Chuyển đổi tỷ lệ[]
Biến đổi skewX[]
Biến đổi skewY[]
Biến đổi xiên[]
Biến đổi ma trận[]

2D Transform là gì?

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

Cú pháp để tạo biến đổi như sau

transform: value;

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

ValueMô 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 chiều rộng và chiều cao

Chuyển đổi dịch[]

|
preserve-3d

0skewX[30deg]
|
preserve-3d

1skewY[30deg]
|
preserve-3d

2

Full code

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

Biến đổi ma trận[]

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ố, bao gồm các chức năng cho phép bạn xoay, thu phóng và chuyển phần tử

Cú pháp của ma trận

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. Use Web Font trong CSS

Bài tiếp theo. Chuyển đổi 3D trong CSS

Thứ Ba, 07/05/2019 11. 39

4,7 ★ 6 👨 13. 103

#CSS

0 Bình luận

Sắp xếp theo

Delete Login to Send

Bạn nên đọc

8 phím để "giải phóng" ổ đĩa máy Mac
Thiết kế đối chiếu [kỹ thuật đảo ngược] Phần mềm độc hại [Phần 4]
Thông tin cập nhật LMHT 10. 2
Những chiếc laptop tốt nhất dành cho “dân” du lịch
Kháng thể là gì?

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
- CSS giới thiệu
- Cú pháp và Selector CSS
- Vị trí đặt CSS
- CSS - Màu
- CSS - Nền
- CSS - Đường viền
- CSS - Ký quỹ
- CSS - Đệm
- CSS - Chiều rộng và Chiều cao
- CSS - Mô hình hộp
- CSS - Phác thảo
- CSS - Văn bản
- CSS - Phông chữ
- CSS - Biểu tượng
- CSS - Liên kết
- CSS - Tạo danh sách
- CSS - Bảng
- CSS - Hiển thị
- CSS - Chiều rộng tối đa
- CSS - Vị trí
- CSS - tràn
- CSS - Float và Clear
- CSS - Khối nội tuyến
- CSS - Căn chỉnh
- CSS - Trình kết hợp
- CSS - Lớp giả
- CSS - Phần tử giả
- CSS - Độ mờ
- CSS - Thanh điều hướng
- CSS - Trình đơn thả xuống
- CSS - Thư viện hình ảnh
- CSS - Sprite hình ảnh
- CSS - Bộ chọn thuộc tính
- CSS - Biểu mẫu
- CSS - Bộ đếm
- CSS - Bố cục
- CSS - Đơn vị
- CSS - Tính đặc hiệu
nâng cao CSS
- CSS - Góc bo tròn
- CSS - Hình ảnh đường viền
- CSS - Nhiều nền
- CSS - Màu
- CSS - Chuyển màu
- CSS - Hiệu ứng đổ bóng
- CSS - Hiệu ứng văn bản
- CSS - Phông chữ web
- CSS - Chuyển đổi 2D
- CSS - Chuyển đổi 3D
- CSS - Chuyển tiếp
- CSS - Hoạt hình
- CSS - Chú giải công cụ
- CSS - Flexbox
- CSS - Nút
- CSS- @media
- Tạo hiệu ứng hover node bằng CSS

công nghệ
- Ứng dụng
- hệ thống
- Game - Trò chơi
- điện thoại Iphone
- Android
- Linux
- Nền web
- Đồng hồ thông minh
- Chụp ảnh - Quay phim
- hệ điều hành Mac
- Phần cứng
- SEO thủ thuật
- base format
- quả mâm xôi
- Dịch vụ ngân hàng
- Lập trình
- Online service
- Dịch vụ nhà mạng
- Nhà thông minh
Tải xuống
- Ứng dụng văn phòng
- Tải game
- Hệ thống tiện ích
- Ảnh, đồ họa
- Internet
- Bảo mật, Antivirus
- Họp, học trực tuyến
- Video, phim, nhạc
- Email
- Lưu trữ đám mây
- Giao tiếp, liên lạc, hẹn hò
- Support for learning
- 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
- HÀNG ĐẦU
- phong thủy
Băng hình
- công nghệ
- Phòng thí nghiệm của Cisco
- Phòng thí nghiệm của Microsoft
- 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
- Công nghệ
- new technology
- 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 technology
- Microsoft Word 2016
- Microsoft Word 2013
- Word 2007
- Excel 2019
- Excel 2016
- Hàm excel
- Microsoft PowerPoint 2019
- Microsoft PowerPoint 2016
- Google Trang tính - Trang tính
- photoshop CS6
- photoshop CS5
- HTML
- CSS và CSS3
- con trăn
- Học SQL
- Lập trình C
- Lập trình C++
- Lập trình C#
- Học HTTP
- Bootstrap
- Máy chủ SQL
- 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. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm