Thực đơn
trang chủiOS

Chức năng xoay CSS: Xoay 2D của một phần tử. Xoay văn bản ở một góc nhất định bằng CSS

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ệt

Khô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ệ (scale), 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 Thuộc tính JavaScript Biến đổi CSS 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.

Mô hình trực quan định dạng CSS mô tả hệ tọa độ trong mỗi phần tử được định vị. Hệ tọa độ là điểm tham chiếu cho các thuộc tính offset. Vị trí và kích thước trong không gian tọa độ này có thể được coi là được tính bằng pixel, liên quan đến điểm tham chiếu, với các giá trị dương ở bên phải và bên dưới. Không gian tọa độ này có thể được thay đổi bằng thuộc tính biến đổi.

Chuyển đổi CSS3 cho phép bạn di chuyển, xoay và chia tỷ lệ các phần tử. Các phép biến đổi biến đổi một phần tử mà không ảnh hưởng đến các phần tử khác của trang web, tức là. các yếu tố khác không di chuyển so với nó.

Các phần tử có thể chuyển đổi bao gồm các phần tử có display:block; và hiển thị: khối nội tuyến; , cũng như các phần tử có giá trị thuộc tính hiển thị ước tính thành table-row , table-row-group , table-header-group , table-footer-group , table-cell hoặc table-caption . Một phần tử với bất kỳ đặt giá trị biến đổi các thuộc tính khác với không có gì.

Có hai loại chuyển đổi CSS3 - 2D Và 3D. biến đổi 2D biến đổi các phần tử trong không gian hai chiều bằng ma trận biến đổi 2D. Ma trận này được sử dụng để tính toán tọa độ đối tượng mới dựa trên các giá trị của thuộc tính Transform và Transform-origin. Các phép biến đổi chỉ ảnh hưởng đến kết xuất hình ảnh. Về mặt bố cục trang, chúng có thể dẫn đến tình trạng tràn nội dung khối. Theo mặc định, điểm chuyển đổi nằm ở trung tâm của phần tử.

Sự biến đổi 2D của các phần tử

Hỗ trợ trình duyệt

I E: 10.0, 9.0 -ms-
Bờ rìa: 12.0
Firefox: 16,0, 3,5 -moz-
Trình duyệt Chrome: 36.0, 4.0 -webkit-
Cuộc đi săn: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
Safari của iOS: 9, 7.1 -webkit-
Trình duyệt Android: 53, 2.1 -webkit-
Trình duyệt Chrome dành cho Android: -webkit-

1. Biến đổi hàm biến đổi 2D

Thuộc tính chỉ định loại chuyển đổi phần tử. Thuộc tính được mô tả bằng cách sử dụng hàm biến đổi, di chuyển một phần tử so với vị trí hiện tại của nó trên trang hoặc thay đổi kích thước và hình dạng ban đầu của nó. Không được thừa kế.

Giá trị hợp lệ:

ma trận() - bất kỳ số nào
Translate() , TranslateX() , TranslateY() — đơn vị độ dài (dương và âm), %
tỉ lệ() , tỉ lệX() , tỉ lệY() — bất kỳ số nào
xoay () - góc (độ, grad, rad hoặc quay)
skew() , skewX() , skewY() — góc (độ, grad, rad)

Chức năng Sự miêu tả
không có Giá trị mặc định có nghĩa là không có chuyển đổi. Cũng hoàn tác việc chuyển đổi cho một phần tử từ một nhóm các phần tử có thể chuyển đổi.
ma trận(a, c, b, d, x, y) Bù đắp các phần tử và đặt cách chúng biến đổi, cho phép bạn kết hợp nhiều hàm chuyển đổi 2D thành một. Cho phép xoay, chia tỷ lệ, nghiêng và định vị lại dưới dạng biến đổi.
Giá trị của a thay đổi tỷ lệ ngang. Giá trị từ 0 đến 1 sẽ làm giảm phần tử và giá trị lớn hơn 1 sẽ làm tăng phần tử đó.
Giá trị c làm biến dạng (dịch chuyển) các cạnh của phần tử dọc theo trục Y, giá trị dương hướng lên trên, giá trị âm hướng xuống dưới.
Giá trị b làm biến dạng (dịch chuyển) các cạnh của phần tử dọc theo trục X, giá trị dương ở bên trái, giá trị âm ở bên phải.
Giá trị d thay đổi tỷ lệ dọc. Giá trị nhỏ hơn 1 làm giảm phần tử, lớn hơn 1 làm tăng phần tử.
Giá trị x di chuyển phần tử dọc theo trục X, dương sang phải, âm sang trái.
Giá trị y di chuyển phần tử dọc theo trục y, giá trị dương sẽ di chuyển phần tử xuống và giá trị âm sẽ di chuyển phần tử lên.
dịch(x,y) Dịch chuyển một phần tử đến vị trí mới, di chuyển nó so với vị trí bình thường của nó sang phải và xuống dưới bằng tọa độ X và Y mà không ảnh hưởng đến các phần tử lân cận. Nếu bạn cần di chuyển một phần tử sang trái hoặc lên trên, thì bạn cần sử dụng các giá trị âm.
dịchX(n) Dịch chuyển một phần tử so với vị trí X bình thường của nó.
dịchY(n) Dịch chuyển một phần tử so với vị trí bình thường của nó dọc theo trục Y.
tỷ lệ (x, y) Chia tỷ lệ các phần tử để làm cho chúng lớn hơn hoặc nhỏ hơn. Giá trị từ 0 đến 1 làm cho phần tử nhỏ hơn. Giá trị đầu tiên chia tỷ lệ phần tử theo chiều rộng, giá trị thứ hai - theo chiều cao. Các giá trị âm hiển thị phần tử theo cách phản chiếu.
thang đoX(n) Hàm chia tỷ lệ chiều rộng của phần tử, làm cho nó rộng hơn hoặc hẹp hơn. Nếu giá trị lớn hơn 1, phần tử sẽ rộng hơn; nếu giá trị nằm trong khoảng từ 1 đến 0, phần tử sẽ trở nên hẹp hơn. Giá trị âm hiển thị phần tử được nhân đôi theo chiều ngang.
thang đoY(n) Hàm này điều chỉnh chiều cao của phần tử, làm cho nó cao hơn hoặc ngắn hơn. Nếu giá trị lớn hơn 1 thì phần tử sẽ cao hơn; nếu giá trị nằm trong khoảng từ 1 đến 0 thì phần tử sẽ thấp hơn. Giá trị âm hiển thị phần tử được nhân đôi theo chiều dọc.
xoay (góc) Xoay phần tử theo số độ xác định, giá trị âm từ -1deg đến -360deg xoay phần tử ngược chiều kim đồng hồ, giá trị dương xoay phần tử theo chiều kim đồng hồ. Giá trị xoay (720deg) xoay phần tử hai vòng đầy đủ.
nghiêng(góc x,góc y) Được sử dụng để làm biến dạng (bóp méo) các cạnh của một phần tử so với trục tọa độ. Nếu một giá trị được chỉ định, giá trị thứ hai sẽ được trình duyệt tự động xác định.
skewX(góc) Làm biến dạng các cạnh của phần tử so với trục X.
nghiêngY(góc) Làm biến dạng các cạnh của phần tử so với trục Y.
ban đầu Đặt giá trị thuộc tính thành giá trị mặc định.
thừa kế Kế thừa giá trị thuộc tính từ phần tử cha.

Cú pháp

Div ( -webkit-transform: xoay(360deg); -ms-transform: xoay(360deg); biến đổi: xoay(360deg); )

Di chuột qua các khối để xem các hàm chuyển đổi đang hoạt động.

2. Điểm chuyển đổi gốc biến đổi

Thuộc tính cho phép bạn dịch chuyển tâm chuyển đổi, tương ứng với vị trí/kích thước/hình dạng của phần tử thay đổi. Giá trị mặc định là center hoặc 50% 50%. Chỉ đặt cho các phần tử được chuyển đổi. Không được thừa kế.

Đôi khi bất thường giải pháp thiết kế buộc người thiết kế bố cục phải dùng đến cách tương tự giải pháp phi tiêu chuẩn khi đặt văn bản. Ví dụ: xoay một trong các thành phần văn bản theo một góc nhất định. Bài viết này sẽ thảo luận về một số giải pháp đơn giản nhiệm vụ này.

Thay thế văn bản bằng hình ảnh

Giải pháp cơ bản nhất cho vấn đề này là sử dụng một bức tranh. Sử dụng chương trình nổi tiếng Adobe Photoshop Văn bản có thể dễ dàng xoay theo mọi góc độ. Như bạn có thể tưởng tượng, không cần nhiều trí thông minh để sử dụng phương pháp này.

Trong một số trường hợp, không thể sử dụng phương pháp khác, nhưng trong hầu hết các trường hợp, họ không còn sử dụng hình ảnh nữa. Điều này được giải thích bởi một số nhược điểm đi kèm với kỹ thuật này:

  • Người dùng không thể sao chép thông tin trong vùng chứa được chỉ định;
  • Sự phức tạp của quy trình thực hiện chỉnh sửa phần văn bản của phần tử;
  • Lưu lượng truy cập trên máy chủ trang web tăng lên;
  • Tăng yêu cầu tới máy chủ khi cập nhật tài nguyên.

Mặc dù thực tế là có rất nhiều mặt tiêu cực của việc sử dụng hình ảnh nhưng phương pháp này vẫn có một số tác động tích cực.

  • Khả năng tương thích trên nhiều trình duyệt– không có vấn đề gì khi hiển thị trong các trình duyệt khác nhau.
  • Khả năng định vị hình ảnh cao.

Tuy nhiên, trong trường hợp này Mặt tiêu cực lớn hơn. Tôi khuyên bạn nên chuyển sang các giải pháp khác.

Sử dụng thuộc tính biến đổi CSS

Chi phí sử dụng phương pháp này cao hơn nhiều so với hình ảnh. Sự khác biệt đáng kể được tạo ra bởi tính linh hoạt trong việc chỉnh sửa văn bản và khả năng chọn và sao chép nội dung của vùng chứa được xoay. Trở ngại chính cho sự phát triển của kỹ thuật này là khả năng tương thích giữa nhiều trình duyệt. Bây giờ chúng tôi đã đạt được kết quả tốt về mặt này, điều này cho phép chúng tôi sử dụng thuộc tính biến đổi mà không gặp bất kỳ vấn đề nào.

Bản chất của cách hoạt động của thuộc tính là chia mặt phẳng theo độ. Kết quả là khi xác định được một góc nhất định thì thùng chứa sẽ chiếm vị trí tương ứng. Điều đáng chú ý là tài sản ở thể tinh khiết không áp dụng. Nó phải đi kèm với các thuộc tính của nhà cung cấp, trên thực tế, cung cấp mức độ tương thích cao giữa các trình duyệt.

Điều quan trọng cần lưu ý là không phải văn bản bên trong khối thay đổi vị trí mà là chính khối đó, nơi thuộc tính được truy cập thông qua bộ chọn lớp hoặc theo một cách khác. Dưới đây là một ví dụ về việc sử dụng phương pháp

Vùng chứa ( - moz- biến đổi: xoay (- 45deg) ; - webkit- biến đổi: xoay (- 45deg) ; - o- biến đổi: xoay (- 45deg) ; - ms- biến đổi: xoay (- 45deg) ; biến đổi: xoay ( - 45 độ) ; )

Kết quả là chúng ta nhận được một cái gì đó như thế này:

Tôi đề cập đến thuộc tính này, thiết kế sẽ được hiển thị mà không gặp vấn đề gì trong Firefox, Opera, Internet Explorer và các trình duyệt webkit khác.

Xử lý qua Javascript

Bản chất của quá trình này hoàn toàn giống với phương pháp đã thảo luận trước đó. Để triển khai nó, bạn cần có kiến ​​thức tối thiểu về mã js, toán học và hiểu biết về bộ lọc Ma trận.

Javascript

var deg2radians = Math. PI * 2/360, độ = - 4; rad = deg * deg2radians, costeta = Math. cos(rad) , sintheta = Math. tội lỗi(rad); jQuery(".rotatedBlock" ) . css((bộ lọc: "progid:DXImageTransform.Microsoft.Matrix (M11="+ costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ", SizingMethod="tự động mở rộng", Enable=true)"} ) ;

Kết quả là chúng ta nhận được hình ảnh giống nhau trong trình duyệt như khi sử dụng thuộc tính biến đổi.

Ngay cả khi bạn không hiểu một ký hiệu nào trong mục này, điều đó cũng không thành vấn đề. Để làm việc với mã này, chỉ cần hiểu rằng giá trị của góc được viết ở dòng thứ hai là đủ, bạn tự thay thế nó và chỉ cần sao chép phần còn lại mà không thay đổi.

Đặc điểm của việc sử dụng Javascript và CSS

Hai phương pháp này có một số khác biệt nhỏ về nguyên tắc hoạt động, những điểm khác biệt rất quan trọng cần biết và tính đến.

Sự khác biệt đầu tiên dựa trên sự khác biệt về chiều cao của khối và vị trí của nó. Cách thoát khỏi tình huống này khá đơn giản là sử dụng thuộc tính lề. Bằng cách thụt lề, chúng tôi đặt khối ở mức và vị trí mong muốn. Những khác biệt về vị trí khác có thể được giải quyết bằng cách gán giá trị cho khối định vị tuyệt đối, cũng hoạt động hiệu quả.

Một cách tiếp cận phức tạp và tùy chỉnh hơn là sử dụng thuộc tính nguồn gốc biến đổi. Bản chất của kỹ thuật này sẽ được mô tả trong các bài viết tiếp theo.

Sự khác biệt tiếp theo nằm ở bản chất của lượt rẽ. Khi sử dụng mã js, điểm xoay nằm ở cạnh của khối. Trong phương pháp thứ hai, điểm này nằm ở trung tâm của phần tử. Để dễ hiểu hơn các bạn nhìn vào hình bên dưới

  • 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.
CSS
Đầ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 một cái mới tài liệu 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 ( Transform: Translate(0,-350px); -webkit-transform: Translate(0,-350px); -o-transform: Translate(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 ( 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); )

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.