Di chuyển và biến đổi trong CSS3. Cách áp dụng chuyển đổi CSS3 cho hình nền
2.
2.
Xoay một phần tử bằng CSS 3
Đôi khi, các nhà thiết kế web phải đối mặt với vấn đề xoay một phần tử. Nhờ CSS 3, vấn đề này giờ đây đã có giải pháp khá đơn giản. Một lần nữa, để tương thích giữa nhiều trình duyệt, bạn cần chỉ định một số thuộc tính. Dưới đây là mã mẫu cho xoay một phần tử 90 độ.Mã CSS
#rotate_element (
-webkit-transform: xoay (90deg); // xoay phần tử cho các trình duyệt khác nhau
biến đổi: xoay (90deg);
}
Căn chỉnh và hướng văn bản bằng CSS 3
Bây giờ biết thêm về tài sản chế độ viết. Nó cho phép bạn đặt căn chỉnh (trái - phải) cho văn bản của phần tử và thú vị nhất là hướng (ngang hoặc dọc)! Chúng ta hãy xem và thử:lr-tb văn bản được hướng từ trái sang phải.
rl-tb văn bản được hướng từ phải sang trái.
tb-rl Văn bản được định hướng theo chiều dọc và căn chỉnh lên trên và bên phải.
bt-rl văn bản được hướng theo chiều dọc và căn chỉnh về phía dưới và cạnh phải.
tb-lr Văn bản được định hướng theo chiều dọc và căn chỉnh lên trên và bên trái.
bt-lr văn bản được hướng theo chiều dọc và căn chỉnh về phía dưới và cạnh trái.
Sử dụng ví dụ về cụm từ văn bản ở đây bạn có thể xem xét tác dụng của thuộc tính CSS
Mã CSS
Chữ(
chế độ viết: lr-tb; /*văn bản được hướng từ trái sang phải */
}
Văn bản 1(
chế độ viết: rb-tb; /*văn bản được hướng từ phải sang trái */
}
Ví dụ xoay văn bản 90 độ và căn chỉnh văn bản CSS 3
Đây ví dụ làm sẵn. Xoay văn bản 90 độ. Để làm điều này, chỉ cần tạo một khối có mã định danh là RotaText và đặt các thuộc tính CSS của nó.Mã HTML và CSS
Ví dụ Bạn có thể xem xoay một phần tử 90 độ trong CSS tại liên kết bên dưới.
Bản dịch: Vlad Merzhevich
Có thể chia tỷ lệ, nghiêng và xoay bất kỳ phần tử nào bằng cách sử dụng thuộc tính biến đổi CSS3. Nó được mọi người ủng hộ trình duyệt hiện đại(có tiền tố) và cho phép xuống cấp nhẹ nhàng, ví dụ:
#myelement ( -webkit-transform: xoay(30deg); -moz-transform: xoay(30deg); -ms-transform: xoay(30deg); -o-transform: xoay(30deg); biến đổi: xoay(30deg); )
Đồ tốt. Tuy nhiên, toàn bộ phần tử sẽ xoay - nội dung, đường viền và hình nền của nó. Phải làm gì nếu bạn chỉ muốn quay hình nền? Hoặc để nền vẫn giữ nguyên nhưng phần tử lại quay?
W3C hiện không có đề xuất nào về việc chuyển đổi hình nền. Điều này sẽ cực kỳ hữu ích, vì vậy tôi nghi ngờ điều gì đó cuối cùng sẽ xuất hiện, nhưng nó sẽ không giúp ích gì cho các nhà phát triển muốn sử dụng các hiệu ứng tương tự ngày nay.
May mắn thay, có một giải pháp. Về cơ bản, đây là một cách hack thêm hình nền vào phần tử giả :trước hoặc :after thay vì vào vùng chứa chính. Phần tử giả có thể biến đổi độc lập.
Chỉ chuyển đổi nền
Vùng chứa không cần phải có bất kỳ kiểu nào, nhưng nó cần đặt vị trí: tương đối vì phần tử giả của chúng ta được đặt bên trong. Đồng thời đặt tràn: ẩn, nếu không nền sẽ vượt ra ngoài vùng chứa.
#myelement (vị trí: tương đối; tràn: ẩn; )
Bây giờ chúng ta có thể tạo một phần tử giả được định vị tuyệt đối với nền có thể biến đổi. thuộc tính chỉ mục zđược đặt là -1, điều này đảm bảo rằng nền xuất hiện bên dưới nội dung của vùng chứa.
#myelement:trước ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 200%; chiều cao: 200%; trên cùng: -50%; bên trái: -50%; z-index: -1; nền: url(background.png ) 0 0 lặp lại; -webkit-transform: xoay (30deg); -moz-transform: xoay (30deg); -ms-transform: xoay (30deg); -o-transform: xoay (30deg); biến đổi: xoay (30deg ); )
Lưu ý rằng bạn có thể cần điều chỉnh chiều rộng, chiều cao và vị trí của phần tử giả. Ví dụ: nếu bạn đang sử dụng hình ảnh lặp lại, vùng xoay phải lớn hơn vùng chứa để chứa đầy đủ nền.
Sửa nền của các phần tử có thể biến đổi
Mọi phép biến đổi vùng chứa gốc cũng áp dụng cho các phần tử giả. Vì vậy, chúng ta cần hoàn tác phép biến đổi, ví dụ: nếu vùng chứa được xoay 30 độ thì nền phải được xoay -30 độ để nó kết thúc ở một vị trí cố định:
#myelement (vị trí: tương đối; tràn: ẩn; -webkit-transform: xoay (30deg); -moz-transform: xoay (30deg); -ms-transform: xoay (30deg); -o-transform: xoay (30deg) ; biến đổi: xoay(30deg); ) #myelement:trước ( nội dung: ""; vị trí: tuyệt đối; chiều rộng: 200%; chiều cao: 200%; trên cùng: -50%; bên trái: -50%; chỉ số z: - 1; nền: url(background.png) 0 0 lặp lại; -webkit-transform: xoay(-30deg); -moz-transform: xoay(-30deg); -ms-transform: xoay(-30deg); -o- biến đổi: xoay(-30deg); biến đổi: xoay(-30deg); )
Một lần nữa, bạn cần điều chỉnh kích thước và vị trí sao cho nền vừa khít với vùng chứa chính.
Xin vui lòng cho một ví dụ. Mã đầy đủđược lưu trữ bên trong HTML.
Hiệu ứng này hoạt động trong IE9, Firefox, Chrome, Safari và Opera. IE8 sẽ không hiển thị bất kỳ chuyển đổi nào nhưng nền sẽ xuất hiện.
IE6 và 7 không hỗ trợ các phần tử giả nên nền sẽ biến mất. Tuy nhiên, nếu bạn muốn hỗ trợ các trình duyệt này, bạn có thể thêm hình nền vào vùng chứa rồi đặt thành không có bằng cách sử dụng bộ chọn hiện đại hoặc thông qua nhận xét có điều kiện.
Hàm xoay () trong CSS thực hiện phép biến đổi xoay hai chiều trên một phần tử xung quanh một tâm cố định. Trong trường hợp này, khối không bị biến dạng và không ảnh hưởng đến vị trí của các vùng chứa HTML lân cận. Phương pháp này cho phép bạn chỉ định góc quay. Ngoài ra, có thể đặt tâm quay tùy ý.
Chuyển đổi khối
Trong CSS, xoay() là một hàm biến đổi nên nó phải được truyền vào thuộc tính biến đổi của phần tử.
Phần tử ( biến đổi: xoay(45deg); )
Đối số đầu tiên và duy nhất là góc mà đối tượng sẽ được xoay. Phép quay được thực hiện trong không gian hai chiều. Đối với các phép biến đổi 3D, có các hàm CSS xoayX(), xoayY(), xoayZ() và xoay3d().
Khoảng trống trên trang ban đầu bị phần tử chiếm giữ vẫn được dành riêng cho nó. Chuyển động trực quan xảy ra trong một lớp mới mà không di chuyển các khối liền kề.
Góc quay
Đối số góc được truyền cho phương thức phải là loại CSS
Góc dương xác định chuyển động quay của vật theo chiều kim đồng hồ, góc âm - theo hướng ngược lại.
Tâm xoay
Theo mặc định, khối được xoay quanh tâm hình học của nó. Để thay đổi điểm này, bạn cần sử dụng thuộc tính Transform-origin.
Theo tiêu chuẩn, cần có ba tham số xác định tọa độ dọc theo trục X, Y và Z. Nhưng vì xoay() trong CSS là một phép biến đổi hai chiều nên chỉ cần truyền hai giá trị là đủ.
Phần tử ( biến đổi: xoay (45deg); nguồn gốc biến đổi: 20px 100%; )
Tọa độ dọc theo mỗi trục có thể được chỉ định theo bất kỳ đơn vị độ dài hợp lệ nào, tỷ lệ phần trăm của kích thước khối hoặc sử dụng các từ khóa trên, dưới, trái, phải. Điểm gốc nằm ở góc trên bên trái của thùng chứa hình chữ nhật.
Hoạt hình xoay
Thuộc tính biến đổi rất phù hợp với các thay đổi động, do đó CSS cho phép bạn tạo hoạt ảnh về chuyển động xoay của một phần tử trong không gian hai chiều.
Nếu bạn muốn xoay một đối tượng để phản hồi một hành động cụ thể của người dùng, chẳng hạn như di con trỏ, bạn có thể sử dụng thuộc tính CSS transition để khiến giá trị của các thuộc tính khác thay đổi chậm.
Phần tử ( transition: biến đổi 2s; ) phần tử: di chuột ( biến đổi: xoay(180deg); )
Không có phép biến đổi nào được áp dụng cho phần tử ban đầu, nhưng khi bạn di chuột qua phần tử đó, khối sẽ xoay 180 độ một cách mượt mà trong vòng hai giây. Khi người dùng loại bỏ con trỏ, thao tác xoay trơn tru tương tự về vị trí ban đầu sẽ diễn ra.
Một cách phức tạp hơn để tạo hiệu ứng cho một đối tượng là xác định chuỗi khung hình của nó bằng cách sử dụng các thuộc tính và quy tắc @keyframes.
Phần tử ( tên hoạt hình: xoay; thời lượng hoạt hình: 2s; số lần lặp hoạt hình: vô hạn; chức năng thời gian hoạt hình: tuyến tính; ) @keyframes xoay ( từ ( Transform: xoay (0deg); ) đến ( biến đổi: xoay (360 độ); ) )
Hoạt ảnh xoay được áp dụng cho phần tử được chỉ định, khiến phần tử đó xoay hoàn toàn từ 0 đến 360 độ trong vòng hai giây. Thuộc tính animation-iteration-count đặt hoạt ảnh lặp lại vô thời hạn và chức năng animation-timing-function đặt hiệu ứng chuyển tiếp mượt mà. Việc kết hợp thuộc tính in với các phép biến đổi xoay cho phép bạn tạo các hiệu ứng động đẹp mắt.
- Dịch
Xin chào, habrafriend thân mến! Có rất nhiều ví dụ trực tuyến về cách sử dụng tuyệt vời các phép biến đổi và chuyển tiếp trong CSS3. Trong bài viết này, chúng ta sẽ tìm hiểu những điều cơ bản về CSS3 và tìm hiểu cách tạo một cái gì đó như thế này. Hướng dẫn này sẽ hữu ích cho những người mới bắt đầu làm quen với CSS3. Bắt đầu nào!
Hệ tọa độ
Để dễ hiểu hơn về cách thức hoạt động của chuyển động của một vật thể, chúng ta sẽ làm việc trong hệ tọa độ.
Tuy nhiên, hệ tọa độ của chúng ta có một điểm đặc biệt: trục Y hướng theo hướng ngược lại so với thông thường. Tại sao? Thực tế là HTML và CSS (cùng với ActionScript chẳng hạn) sử dụng hệ tọa độ nghịch đảo, vì trang web bắt đầu từ bên trái góc trên cùng và đi xuống.
Lưu ý: Chúng tôi sẽ cho rằng bạn đã quen thuộc với Cấu trúc HTML và CSS. Tôi sẽ bỏ qua phần giải thích về cách thiết lập tập tin CSS, cách đặt hình ảnh, v.v. Chúng tôi sẽ tập trung vào hình ảnh động. Nếu bạn không chắc chắn về kỹ năng của mình cấp độ cao, thì chúng tôi khuyên bạn nên xem qua khóa học “HTML và CSS trong 30 ngày” (miễn phí và bật tiếng anh) để tìm hiểu mọi thứ bạn cần.
1: Chuyển động ngang
Chuyển động đầu tiên chúng ta sẽ chứng minh là chuyển động nằm ngang. Chúng ta sẽ di chuyển các đối tượng từ trái sang phải và phải sang trái.Di chuyển sang phải
Để di chuyển một đối tượng chúng ta sẽ sử dụng biến đổi: dịch(x,y), trong đó X là số dương và Y=0.
HTML
Mở trình soạn thảo mã yêu thích của bạn và nhập thông tin sau:
Chúng tôi đã xác định ba lớp cho hình ảnh:
- đối tượng: Thiết lập các quy tắc cơ bản của đối tượng của chúng tôi.
- van: Chúng tôi sẽ sử dụng các đồ vật khác nhauđể thể hiện từng loại hoạt hình.
- move-right: Sử dụng lớp này chúng ta sẽ di chuyển đối tượng của mình.
Đầu tiên, chúng ta sẽ đặt đối tượng (hình ảnh chiếc xe tải) vào giữa.
.object ( vị trí: tuyệt đối; ) .van ( trên cùng: 45%; trái: 44%; )
Trong ví dụ này, chúng ta sẽ di chuyển đối tượng sang bên phải 350px. Cú pháp được sử dụng biến đổi: dịch(350px,0);. Ngoài ra, đối tượng sẽ chỉ di chuyển khi bạn di chuột qua nó: #axis:di chuột .di chuyển sang phải.
#axis:hover .move-right( biến đổi: dịch(350px,0); -webkit-transform: dịch(350px,0); /** Chrome & Safari **/ -o-transform: dịch(350px,0) ; /** Opera **/ -moz-transform: dịch(350px,0); /** Firefox **/ )
Tham số biến đổi sẽ chỉ di chuyển đối tượng từ điểm này sang điểm khác chứ không tạo ra hoạt ảnh chuyển động nhất định. Để khắc phục điều này, bạn cần thêm tham số di chuyển vào class.object.
Đối tượng ( vị trí: tuyệt đối; transition: tất cả 2s dễ dàng ra vào; -webkit-transition: tất cả 2s dễ dàng ra vào; /** Chrome & Safari **/ -moz-transition: tất cả 2s dễ dàng ra vào ; /** Firefox **/ -o-transition: tất cả 2s dễ dàng ra vào; /** Opera **/ )
Quy tắc di chuyển này sẽ yêu cầu trình duyệt hoạt hình Tất cả tham số đối tượng trên 2 giây(không chậm trễ) bằng cách sử dụng chức năng dễ dàng ra vào.
Chúng ta có thể sử dụng 6 chức năng định giờ chuyển động khác nhau:
- tuyến tính: Chuyển động xảy ra với tốc độ không đổi từ đầu đến cuối.
- xoa dịu: Chuyển động bắt đầu chậm rãi và sau đó tăng dần tốc độ.
- dễ dàng trong: Chuyển động bắt đầu chậm.
- thoải mái: Chuyển động kết thúc một cách chậm rãi.
- dễ dàng ra vào: Chuyển động bắt đầu và kết thúc chậm rãi.
- khối bezier: Xác định thủ công giá trị chuyển động.
Di chuyển sang trái
Để di chuyển một đối tượng sang trái, bạn chỉ cần đặt giá trị âm vào trục Ồ, trong khi Y vẫn không thay đổi. Trong trường hợp của chúng tôi, chúng tôi sẽ di chuyển đối tượng đến - 350px Qua bên trái.
HTML
Tạo nên tài liệu mới html và dán đoạn mã sau:
Lần này chúng tôi đang sử dụng lớp di chuyển sang tráiđể di chuyển đối tượng sang trái.
CSS
Bây giờ hãy nhập -350px cho trục OX. biến đổi: dịch(-350px,0);- di chuyển đối tượng sang trái.
#axis:hover .move-left ( biến đổi: dịch(-350px,0); -webkit-transform: dịch(-350px,0); /** Safari & Chrome **/ -o-transform: dịch(-350px ,0); /** Opera **/ -moz-transform: dịch(-350px,0); /** Firefox **/ )
Vì chúng ta đã xác định quy tắc chuyển động trước đó nên chúng ta không cần phải thực hiện lại.
2: Chuyển động dọc
Di chuyển một vật thể theo chiều dọc sẽ không khó vì nó giống hệt vật thể nằm ngang. Sự khác biệt duy nhất là chúng ta sẽ sử dụng giá trị -yđể di chuyển lên và giá trị yđể di chuyển xuống.Tiến lên
HTML
Mẫu HTML giống hệt với các ví dụ trước. Tuy nhiên, chúng tôi sẽ thay thế đối tượng của mình bằng một tên lửa (để rõ ràng) và chỉ định một lớp di chuyển.
CSS
Giống như chiếc xe tải, chúng ta sẽ đặt tên lửa ở giữa:
.rocket ( trên cùng: 43%; trái: 44%; )
Như chúng tôi đã lưu ý trước đó, tọa độ Y phải âm. Trong trường hợp của chúng tôi, chúng tôi sẽ di chuyển đối tượng lên 350px.
#axis:hover .move-up ( biến đổi: dịch(0,-350px); -webkit-transform: dịch(0,-350px); -o-transform: dịch(0,-350px); -moz-transform: dịch(0,-350px); )
Hãy di chuyển xuống
Như bạn có thể đoán, để di chuyển một đối tượng xuống, tọa độ Y phải dương và tọa độ X phải bằng 0. Cú pháp: dịch(0,y);
HTML
CSS
#axis:hover .move-down ( Transform: Translate(0,350px); -webkit-transform: Translate(0,350px); -o-transform: Translate(0,350px); -moz-transform: Translate(0,350px); )
3: Chuyển động chéo
Để di chuyển một đối tượng theo đường chéo, chúng ta sẽ kết hợp các tham số x Và y. Cú pháp sẽ như sau: biến đổi: dịch(x,y). Tùy thuộc vào hướng, giá trị x Và y có thể là tích cực hoặc tiêu cực.
HTML
CSS
#axis:hover .move-ne ( biến đổi: dịch(350px,-350px); -webkit-transform: dịch(350px,-350px); -o-transform: dịch(350px,-350px); -moz-transform: dịch(350px,-350px); )
4: Xoay
Xoay trong CSS3 được điều khiển bởi tọa độ độ (từ 0° đến 360°). Để xoay một đối tượng, hãy áp dụng các tùy chọn sau: biến đổi: xoay (ndeg); Ở đâu N- độ.
Xoay chiều kim đồng hồ
Để xoay một đối tượng theo chiều kim đồng hồ, áp dụng một giá trị dương cho xoay(ndeg).HTML
CSS
#axis:hover .rotate360cw ( biến đổi: xoay(360deg); -webkit-transform: xoay(360deg); -o-transform: xoay(360deg); -moz-transform: xoay(360deg); )
Xoay ngược chiều kim đồng
Để xoay một đối tượng ngược chiều kim đồng hồ, hãy áp dụng giá trị âm cho xoay(ndeg).
HTML
CSS
#axis:hover .rotate360ccw ( biến đổi: xoay(-360deg); -webkit-transform: xoay(-360deg); -o-transform: xoay(-360deg); -moz-transform: xoay(-360deg); )
5: Chia tỷ lệ
Chia tỷ lệ là tính năng thú vị CSS3. Sử dụng tham số thang đo(n) hoặc tham số tỷ lệ (x, y), chúng ta có thể tăng hoặc giảm đối tượng trực tiếp trong HTML. Đối tượng sẽ thay đổi kích thước tùy thuộc vào giá trị của n/x,y, trong đó trục X là chiều rộng và trục Y là chiều cao.Hãy xem ví dụ sau.
Tài sản chuyển đổi CSS(từ từ "chuyển đổi") cho phép bạn sửa đổi một phần tử trên các trang HTML. Ví dụ, bạn có thể
- quay
- thay thế
- thay đổi quy mô
- không thể
- kết hợp các bước trên
Nhờ thuộc tính này, bạn có thể tạo hiệu ứng thú vị không sử dụng JavaScript, cho phép bạn tăng tốc trình duyệt. Điều quan trọng cần lưu ý là có thể kết hợp hiệu ứng với độ trễ thời gian.
1. Cú pháp chuyển đổi CSS
biến đổi: biến đổi1 [biến đổi2];
Một số hành động với một đối tượng được phép đồng thời (ví dụ: xoay, dịch chuyển và thay đổi tỷ lệ).
Lưu ý về trình duyệtKhông phải tất cả các trình duyệt đều hỗ trợ chuyển đổi. Bạn phải sử dụng tiền tố CSS của nhà cung cấp:
- -ms-transform - dành cho IE9 trở lên (dưới phiên bản 9, chuyển đổi không được hỗ trợ
- -webkit-transform - dành cho Chrome, Safari, Android và iOS
- -o-transform - dành cho Opera lên tới phiên bản 12.10
- -moz-transform - dành cho Firefox lên tới phiên bản 16.0
2. Transform:rotate(x) - xoay đối tượng
Để xoay một phần tử, có lệnh xoay(x) . Nó cho phép bạn xoay một đối tượng x độ theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ. Giá trị x phải được chỉ định theo độ độ
Ví dụ 1. Xoay một đối tượng trong html thông qua chuyển đổi
Ghi chú
Của cải:
-ms-transform : xoay (20deg ); -webkit-transform : xoay (20deg ); -o-transform : xoay (20deg ); -moz-transform : xoay (20deg );
Cần thiết cho hoạt động chính xác trong các phiên bản trình duyệt cũ hơn. Trong các ví dụ sau, chúng tôi cũng sẽ viết chúng.
Ví dụ # 2. Xoay một đối tượng trong html khi di chuột
Hãy tạo một lớp kvadrat2 và viết một lớp giả :hover cho nó, trong đó việc xoay và thay đổi màu sang màu nhạt hơn (từ #444 đến #888) sẽ được chỉ định.
Trang này chuyển đổi thành như sau
Nhưng vòng quay này xảy ra đột ngột và trông không “ngoạn mục”. Điều này có thể dễ dàng khắc phục bằng cách làm mịn. Ví dụ sau sẽ triển khai hoạt ảnh.
Ví dụ # 3. Xoay mượt mà khi di chuột (hoạt hình) trong html
Để xoay trơn tru (hay nói cách khác là làm mịn), bạn cần đặt thêm một thuộc tính chuyển tiếp. Thuộc tính này chịu trách nhiệm về hiệu ứng thời gian và làm mịn. TRONG trong ví dụ này trường hợp đơn giản nhất với quá trình chuyển đổi trong 1 giây được xem xét với tốc độ tuyến tính tuyến tính
Trang này chuyển đổi thành như sau
Nó đã trở nên đẹp hơn rất nhiều và hoạt hình này mang lại nhiều cơ hội để tạo hiệu ứng trên trang web chỉ bằng CSS.
3. Transform:translate(x,y) - chuyển vị đối tượng
Lệnh tiếp theo chúng ta sẽ xem xét là lệnh di chuyển một đối tượng dịch(x,y) , trong đó các đối số trong ngoặc đơn lần lượt là phần bù dọc theo trục X và Y.
Ví dụ #4. Dịch chuyển các đối tượng trong html thông qua phép biến đổi
Trang này chuyển đổi thành như sau
Những hiệu ứng như vậy thường được sử dụng. Rốt cuộc, điều này giúp bạn có thể tạo hoạt ảnh mà không cần JavaScript. TRONG trong trường hợp này hình vuông di chuyển ngay lập tức (không có hình ảnh động).
Ghi chúNếu bạn chỉ cần áp dụng một phép biến đổi dọc theo một trong các trục thì bạn có thể sử dụng trường hợp đặc biệt hơn: dịchX(x) - X offset, dịchY(y) - Y offset.
4. Transform:scale(x,y) - chia tỷ lệ đối tượng
Lệnh để chia tỷ lệ một đối tượng làscale(x,y) , trong đó các đối số trong ngoặc đơn lần lượt là tỷ lệ dọc theo trục X và Y.
Ví dụ #5. Chia tỷ lệ đối tượng trong html
Trang này chuyển đổi thành như sau
Khi di chuột, hình vuông sẽ lớn hơn theo chiều ngang 50% (hệ số 1,5) và lớn hơn theo chiều dọc 30% (hệ số 1,3). Giá trị 1 có nghĩa là không chia tỷ lệ. Bất cứ điều gì nhỏ hơn 1 sẽ có nghĩa là đối tượng đang ngày càng nhỏ hơn.
Ghi chúNếu bạn chỉ cần áp dụng một phép biến đổi dọc theo một trong các trục thì bạn có thể sử dụng trường hợp đặc biệt hơn: tỉ lệ X(x) - chia tỷ lệ dọc theo X, tỉ lệY(y) - chia tỷ lệ dọc theo Y.
5. Transform:skew - độ nghiêng của đối tượng
Lệnh nghiêng một đối tượng là skew(x,y) , trong đó các đối số trong ngoặc đơn lần lượt là độ dốc dọc theo trục X và Y. Độ dốc phải được xác định bằng độ.
Ví dụ #6. Nghiêng đối tượng trong html
Trang này chuyển đổi thành như sau
Khi di chuột, hình vuông biến thành hình thoi nhờ độ nghiêng.
Ghi chúNếu bạn chỉ cần áp dụng một phép biến đổi dọc theo một trong các trục thì bạn có thể sử dụng trường hợp đặc biệt hơn: skewX(x) - độ dốc trong X, skewY(y) - độ dốc trong Y.
6. Kết hợp các giá trị biến đổi
Đã đến lúc xem xét những hiệu ứng thú vị có thể đạt được bằng cách kết hợp các phép biến đổi khác nhau lại với nhau. Chúng ta hãy áp dụng cùng lúc ba hành động để thay đổi đối tượng: chia tỷ lệ (tỷ lệ), xoay (rotate) và dịch (dịch).
Ví dụ #7. Kết hợp các giá trị biến đổi
Giá trị ban đầu: hình vuông viền đen. Khi bạn di chuột qua nó, nó sẽ xoay thành một vòng tròn có khung màu đỏ và đổi màu.
Trang này chuyển đổi thành như sau
7. Các giá trị biến đổi khác
Chúng tôi đã xem xét các giá trị biến đổi cơ bản nhất. Hãy xem xét các khả năng khác.
- không có - không có chuyển đổi (nó được bật theo mặc định);
- ma trận(x,x,x,x,x,x) - Phép biến đổi 2D sử dụng ma trận 6 giá trị;
- ma trận3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x)- Chuyển đổi 3D sử dụng ma trận 16 giá trị;
- Translate3d(x,y,z) - Chuyển động 3d (so với chuyển động bình thường, tọa độ thứ ba được thêm vào đây);
- scale3d(x,y,z) - chia tỷ lệ theo 3d (so với tỷ lệ thông thường, tọa độ thứ ba được thêm vào đây);
- xoay3d(x,y,z) - xoay trong 3d (so với xoay thông thường, tọa độ thứ ba được thêm vào đây);
- xoayX(x) - xoay 3d dọc theo trục X;
- xoayY(x) - xoay 3d dọc theo trục Y;
- xoayZ(x) - xoay 3d dọc theo trục Z;
- phối cảnh (n) - phối cảnh để chuyển đổi phần tử 3D;
Trong JavaScript Thuộc tính CSS biến đổi có sẵn trên các thuộc tính sau:
object.style.transform="Chuyển đổi" document.getElementById("elementID").style.transform = ""
Bạn có thể đặt câu hỏi "tại sao lại sử dụng biến đổi khi bạn có thể chỉ cần thay đổi dữ liệu đối tượng khi chúng ta cần. Ví dụ: bằng cách thay đổi kích thước của đối tượng?" Sự khác biệt là thuộc tính biến đổi không dịch chuyển các thành phần khác trên trang trong quá trình chuyển đổi. Trong trường hợp thay đổi đơn giản kích thước của đối tượng, điều này chắc chắn dẫn đến sự dịch chuyển của các đối tượng lân cận xung quanh, theo quy luật, là xấu.
