Thực đơn
trang chủSự cố

Xoay văn bản ở một góc nhất định bằng CSS. Di chuyển và biến đổi trong CSS3

  • 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 ở góc trên cùng bên trái và đi xuống.
Lưu ý: Chúng tôi giả định rằng bạn đã quen thuộc với cấu trúc của HTML và CSS. Tôi sẽ bỏ qua việc giải thích cách tùy chỉnh tệp CSS, cách đặt ả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 rằng kỹ năng của mình ở mức 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ằng 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 ả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, nhưng sẽ không tạo ra hình ảnh động của chuyển động này. Để 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 tài liệu html mới 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à một tính năng thú vị của 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.

Thuộc tính biến đổi CSS (từ từ “chuyển đổi”) cho phép bạn sửa đổi một thành phần 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 các hiệu ứng thú vị mà không cần sử dụng JavaScript, điều này 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 để 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. Ví dụ này xem xét trường hợp đơn giản nhất với quá trình chuyển đổi trong 1 giây 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 trường hợp này, hình vuông sẽ 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 JavaScript, thuộc tính biến đổi CSS có sẵn thông qua 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 một sự thay đổi đơn giản về kích thước của một vật thể, điều này chắc chắn sẽ dẫn đến sự dịch chuyển của các vật thể lân cận xung quanh, theo quy luật, là xấu.

Hôm nay chúng ta sẽ xem xét một hiệu ứng tuyệt vời như vậy có được nhờ CSS3. Chúng ta đang nói về việc xoay một khối hoặc một hình ảnh. Nó phù hợp một cách đáng ngạc nhiên với giao diện của trang web và sau khi nắm vững bài học này, bạn sẽ có thể áp dụng hiệu ứng này trong các dự án của mình.

Vì vậy, chúng ta có một tập hợp các khối chứa một số nội dung. Chúng tôi muốn rằng khi chúng tôi di chuột qua một khối, nó sẽ xoay quanh trục của nó và hiển thị thông tin ở mặt sau. Tôi nghĩ mọi người đều đã từng chơi bài và mọi người đều nhớ khoảnh khắc thú vị đó khi họ phải lật bài. Bây giờ chúng ta sẽ làm điều tương tự. Đây là ví dụ ban đầu của chúng tôi:

Hãy bắt đầu viết CSS của chúng tôi. Điều đầu tiên chúng ta phải làm, vì chúng ta đang làm việc với các phép biến đổi 3D, là đặt khoảng cách từ đối tượng đến điểm quan sát. Và đây là đoạn mã tồi tệ đầu tiên:

Hộp đựng lật ( -webkit-phối cảnh:1000; -moz-phối cảnh:1000; -ms-phối cảnh:1000; phối cảnh:1000; )

Bạn có thể chỉ định bất kỳ số nào khác. Hãy thử nghiệm cho chính mình. Các phần trước (.front) và back (.back) của lá bài của chúng ta cần được định vị một cách tuyệt đối sao cho chúng “chồng lên nhau” ở vị trí cuối cùng. Chúng ta cũng cần đảm bảo rằng mặt trái của các phần tử bị đảo ngược không được hiển thị trong quá trình hoạt ảnh. Thuộc tính backface-visibility sẽ giúp chúng ta điều này:

Mặt trước, .back ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; width:100%; chiều cao:100%; vị trí: tuyệt đối; trên cùng: 0; bên trái: 0; )

Hãy đặt chỉ số z cho mặt trước (sao cho nó ở trên cùng ở trạng thái mặc định) và mô tả các góc xoay mặc định so với trục tung:

/* mặt trước được đặt phía trên mặt sau */ .front ( -webkit-transform: xoayY(0deg); -moz-transform:rotateY(0deg); -ms-transform: xoayY(0deg); -o-transform: xoayY(0deg ); biến đổi: xoayY(0deg); z-index: 2; ) /* đảo ngược, mặt ẩn ban đầu */ .back ( biến đổi: xoayY(180deg); -webkit-transform:rotateY(180deg); -moz -transform: xoayY(180deg); -ms-transform: xoayY(180deg); -o-transform: xoayY(180deg); )

Khi di chuột, các lá bài của chúng ta sẽ xoay, các góc của các cạnh của chúng sẽ thay đổi từ 0 đến 180 độ và từ 180 độ thành 0:

/* mặt trước được đặt phía trên mặt sau */ .flip-container:hover .front ( Transform: xoayY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); - ms-transform: xoayY(180deg); -o-transform: xoayY(180deg); ) /* đảo ngược, phía ẩn ban đầu */ .flip-container:hover .back ( -webkit-transform: xoayY(0deg); -moz -transform:rotateY (0deg); -ms-transform: xoayY(0deg); -o-transform: xoayY(0deg); biến đổi: xoayY(0deg); )

Chúng tôi sắp hoàn thành công việc của mình. Tất cả những gì còn lại là cho trình duyệt biết các phần tử con sẽ được hiển thị như thế nào trong không gian 3D. Thuộc tính này phải được sử dụng cùng với thuộc tính biến đổi và được gọi là kiểu biến đổi. Thuộc tính này nên được áp dụng cho một khối có lớp .flipper chứ không phải cho .back và .front, nếu không chúng ta sẽ gặp phải một bất ngờ khó chịu trong trình duyệt Opera.

Flipper ( -webkit-transform-style: bảo quản-3d; -moz-transform-style: bảo quản-3d; -ms-transform-style: bảo quản-3d; -o-transform-style: bảo quản-3d; kiểu biến đổi: bảo quản-3d ;)

Hoan hô, chúng tôi đã làm được. Chúng ta vừa học cách xoay vòng bằng CSS. Phần tốt nhất là tất cả các trình duyệt hiện đại đều hỗ trợ nó. Vâng, vâng, người dùng Internet Explorer cũng có thể thấy vẻ đẹp này bắt đầu từ phiên bản 10. Thật không may, ở Nga đã có một hành vi xấu xa là kéo theo một chuỗi IE8 và IE9 đã lỗi thời. Vì vậy, khách hàng của tôi muốn hiển thị chú giải công cụ trong các trình duyệt cũ hơn tại thời điểm di chuột. Hãy xem chúng ta có thể làm gì.

Điều đầu tiên bạn nghĩ đến là sử dụng lệnh @supports. Chúng ta có thể viết:

@supports (transform-style: Serve-3d) hoặc (-moz-transform-style: Serve-3d) hoặc (-webkit-transform-style: Serve-3d) ( /* kiểu cho các trình duyệt hỗ trợ */ /* 3D biến đổi */ )

Thật không may, ngay cả IE 11 cũng không biết gì về nó, vì vậy chúng tôi sẽ sử dụng cách cũ:

Trong tệp ie.css, chúng tôi sẽ mô tả các kiểu cần thiết cho chú giải công cụ của chúng tôi. Tôi sẽ không trình bày ở đây vì... nó nằm ngoài phạm vi của bài viết này (và không có gì thú vị ở đó cả). Nếu muốn, bạn có thể xem nó trong ví dụ về xoay dọc bằng CSS của chúng tôi. Nhưng nếu chúng ta quan tâm đến việc xoay ngang thì sao? Trong trường hợp này, mã của chúng tôi được chuyển đổi như thế này:

Vertical.flip-container ( vị trí: tương đối; ) .vertical.flip-container .flipper ( -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin : 100% 213,5px; nguồn gốc biến đổi: 100% 213,5px; ) .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform: xoayX(0deg); -moz -transform: xoayX(0deg); -o-transform: xoayX(0deg); -ms-transform: xoayX(0deg); biến đổi: xoayX(0deg); ) .vertical .back, .vertical.flip-container:hover . phía trước, .vertical.flip-container.hover .front ( -webkit-transform: xoayX(180deg); -moz-transform: xoayX(180deg); -o-transform: xoayX(180deg); -ms-transform: xoayX( 180deg); biến đổi: xoayX(180deg); )

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 . Nó bao gồm một giá trị số và một đơn vị đo độ (từ độ tiếng Anh - độ).

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ố chỉ đị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.

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 hỗ trợ bởi tất cả các trình duyệt hiện đại (có tiền tố) và cho phép xuống cấp một cách 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ó. Nếu bạn chỉ muốn xoay hình nền thì sao? 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. Chúng tôi đặt thuộc tính z-index thành -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

Bất kỳ phép biến đổi nào trên vùng chứa chính cũng được á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ã hoàn chỉnh đượ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.