Chức năng xoay CSS: xoay một phần tử theo hai chiều. Xoay văn bản ở một góc nhất định bằng CSS

• Dịch

Xin chào habradrug thân mến! Có rất nhiều ví dụ về các phép biến đổi và chuyển tiếp tuyệt vời trong CSS3 trên internet. Trong bài viết này, chúng ta sẽ đi qua các khái niệm cơ bản về CSS3 và tìm hiểu cách tạo một cái gì đó như thế này. Bài hướng dẫn này sẽ hữu ích cho những ai mới bắt đầu làm quen với CSS3. Hãy bắt đầu!

Hệ tọa độ

1: Chuyển động ngang

Di chuyển sang phải

• đối tượng: Thiết lập các quy tắc chính của đối tượng của chúng tôi.
• van: Chúng tôi sẽ sử dụng các đối tượng 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.

#axis: hover .move-right (biến đổi: dịch (350px, 0); -webkit-biến đổi: dịch (350px, 0); / ** Chrome & Safari ** / -o-biến đổi: dịch (350px, 0) ; / ** Opera ** / -moz-biến đổi: 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 hoạt ảnh của chuyển động này. Để khắc phục điều này, bạn cần thêm một tham số di chuyển trong lớp .object.

Đối tượng (vị trí: tuyệt đối; chuyển tiếp: tất cả 2 giây dễ dàng vào-ra; -webkit-chuyển tiếp: tất cả 2 giây dễ dàng vào-ra; / ** Chrome & Safari ** / -moz-chuyển đổi: tất cả 2 giây dễ dàng vào-ra ; / ** Firefox ** / -o-transfer: dễ dàng chuyển đổi cả 2; / ** Opera ** /)
Quy tắc di chuyển này sẽ yêu cầu trình duyệt tạo hoạt ảnh tất cả các thông số đối tượng trên 2 giây(không có độ trễ) bằng cách sử dụng chức năng vào ra dễ dàng.
Chúng ta có thể sử dụng 6 chức năng thời gian 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 dần và sau đó tăng tốc độ.
• dễ dàng trong: Di chuyển bắt đầu từ từ.
• thoải mái: Việc di chuyển kết thúc chậm.
• dễ vào: Di chuyển bắt đầu và kết thúc chậm.
• khối-bezier: định nghĩa thủ công của giá trị dịch chuyển.

Di chuyển sang trái

Html
Tạo một tài liệu html mới và dán mã sau:

CSS
Bây giờ, hãy nhập -350px cho trục OX. biến đổi: translate (-350px, 0);- di chuyển đối tượng sang trái.
#axis: hover .move-left (biến đổi: dịch (-350px, 0); -webkit-biến đổi: dịch (-350px, 0); / ** Safari & Chrome ** / -o-biến đổi: dịch (-350px , 0); / ** Opera ** / -moz-biến đổi: 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 thực hiện lại.

2: Chuyển động thẳng đứng

Tiến lên

Html
Mẫu HTML giống với các ví dụ trước. Tuy nhiên, chúng tôi sẽ thay thế đối tượng của chúng tôi bằng một tên lửa (để rõ ràng) và chỉ định lớp di chuyển lên.

CSS
Cũng giống như xe tải, chúng ta sẽ đặt tên lửa vào giữa:
.rocket (trên: 43%; trái: 44%;)
Như chúng ta đã lưu ý trước đó, tọa độ Y phải là số â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-biến đổi: dịch (0, -350px); -o-biến đổi: dịch (0, -350px); -moz-biến đổi: dịch (0, -350px);)

Di chuyển xuống

Html

CSS
#axis: hover .move-down (biến đổi: dịch (0.350px); -webkit-biến đổi: dịch (0.350px); -o-biến đổi: dịch (0.350px); -moz-biến đổi: dịch (0.350px); )

3: Chuyển động theo đường chéo

Html

CSS
#axis: hover .move-ne (biến đổi: dịch (350px, -350px); -webkit-biến đổi: dịch (350px, -350px); -o-biến đổi: dịch (350px, -350px); -moz-biến đổi: dịch (350px, -350px);)

4: Xoay

Xoay chiều kim đồng hồ

Html

CSS
#axis: hover .rotate360cw (biến đổi: xoay (360 độ); -webkit-biến đổi: xoay (360 độ); -o-biến đổi: xoay (360 độ); -moz-biến đổi: xoay (360 độ);)

Xoay ngược chiều kim đồng

Html

CSS
#axis: hover .rotate360ccw (biến đổi: xoay (-360deg); -webkit-biến đổi: xoay (-360deg); -o-biến đổi: xoay (-360deg); -moz-biến đổi: xoay (-360deg);)

5: Chia tỷ lệ

Hôm nay chúng ta sẽ xem xét một hiệu ứng tuyệt vời như vậy có sẵn cho chúng ta nhờ CSS3. Đó là về việc xoay một khối hoặc hình ảnh. Nó phù hợp tuyệt vời với giao diện của trang web và 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 tôi có một tập hợp các khối với một số nội dung. Chúng tôi muốn rằng khi di chuột qua một khối, nó sẽ quay quanh trục của nó và hiển thị thông tin ở mặt sau. Tôi nghĩ ai cũng từng một lần chơi bài và ai cũng nhớ khoảnh khắc thú vị khi phải lật úp bài. Chúng tôi sẽ làm như vậy bây giờ. Đâ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 tôi phải làm, vì chúng tôi đang làm việc với các phép biến đổi 3D, là thiết lập khoảng cách của đối tượng của chúng tôi từ điểm xem. Và đây là mã đầu tiên:

Flip-container (-webkit-phối cảnh: 1000; -moz-perspective: 1000; -ms-perspective: 1000; phối cảnh: 1000;)

Bạn có thể đặt bất kỳ số nào khác. Hãy tự mình thử nghiệm. Đối với phần trước (.front) và sau (.back) của thẻ chơi của chúng tôi, chúng tôi cần đặt vị trí tuyệt đối để 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ử được lật không được hiển thị trong quá trình hoạt ảnh. Thuộc tính hiển thị mặt sau sẽ giúp chúng tôi điều này:

Mặt trước, .back (-webkit-backface-khả năng hiển thị: ẩn; -moz-mặt sau-hiển thị: ẩn; -ms-mặt sau-hiển thị: ẩn; hiển thị mặt sau: ẩn; chiều rộng: 100%; chiều cao: 100%; vị trí: tuyệt đối; trên cùng: 0; trái: 0;)

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

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

Khi di chuột, các thẻ của chúng ta sẽ xoay, góc của các mặt 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 (biến đổi: xoayY (180deg); -webkit-biến đổi: xoayY (180deg); -moz-biến đổi: xoayY (180deg); -ms- biến đổi: xoayY (180deg); -o-biến đổi: xoayY (180deg);) / * lùi lại, phía sau ẩn ban đầu * / .flip-container: hover .back (-webkit-biến đổi: xoayY (0deg); -moz-biến đổi : xoayY (0deg); -ms-biến đổi: xoayY (0deg); -o-biến đổi: 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à làm cho trình duyệt hiểu rõ cách các phần tử con sẽ được hiển thị 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 khối có lớp .flipper, không phải cho .back và .front, nếu không chúng ta sẽ gặp phải bất ngờ khó chịu trong trình duyệt Opera.

Flipper (-webkit-biến-phong cách: bảo tồn-3d; -moz-biến đổi-phong cách: bảo tồn-3d; -ms-biến đổi-phong cách: bảo tồn-3d; -o-biến đổi-phong cách: bảo tồn-3d; biến đổi-phong cách: bảo tồn-3d;)

Hoan hô, chúng tôi đã làm được. Chúng ta vừa học cách xoay vòng với CSS. Hơn hết, tất cả các trình duyệt hiện đại đều hỗ trợ nó. Có, người dùng trong 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 thói quen xấu 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 một chú giải công cụ được hiển thị tại thời điểm di chuột trong các trình duyệt cũ hơn. Hãy xem những gì chúng ta có thể làm.

Điều đầu tiên nghĩ đến là sử dụng chỉ thị @supports. Chúng tôi có thể viết:

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

Chao ôi và ôi, ngay cả IE 11 cũng không biết gì về nó, vì vậy chúng ta hãy sử dụng cách cổ điển 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 bao gồm nó ở đây, bởi vì nó nằm ngoài phạm vi của bài viết này (và không có gì thú vị ở đó). Bạn có thể thấy nó trong ví dụ xoay dọc CSS của chúng tôi nếu bạn muốn. Nhưng nếu chúng ta quan tâm đến chuyển động quay ngang thì sao? Trong trường hợp này, mã của chúng tôi được chuyển đổi như sau:

Vertical.flip-container (position: relative;) .vertical.flip-container .flipper (-webkit-variable-origin: 100% 213.5px; -moz-variable-origin: 100% 213.5px; -ms-variable-origin : 100% 213.5px; biến đổi-gốc: 100% 213.5px;) .vertical.flip-container: hover .back, .vertical.flip-containerner.hover .back (-webkit-biến đổi: xoayX (0deg); -moz -transform: xoayX (0deg); -o-biến đổi: xoayX (0deg); -ms-biến đổi: xoayX (0deg); biến đổi: xoayX (0deg);) .vertical .back, .vertical.flip-container: hover. phía trước, .vertical.flip-containerner.hover .front (-webkit-biến đổi: xoayX (180deg); -moz-biến đổi: xoayX (180deg); -o-biến đổi: xoayX (180deg); -ms-biến đổi: xoayX ( 180deg); biến đổi: xoayX (180deg);)

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à có thể bị giảm chất lượng một cách duyên dáng, ví dụ:

#myelement (-webkit-biến đổi: xoay (30deg); -moz-biến đổi: xoay (30deg); -ms-biến đổi: xoay (30deg); -o-biến đổi: xoay (30deg); biến đổi: xoay (30deg)); )

Điều tốt. Tuy nhiên, toàn bộ phần tử xoay - nội dung, đường viền và hình nền của nó. Nếu bạn chỉ muốn xoay ảnh nền thì sao? Hay để nền vẫn giữ nguyên vị trí và phần tử xoay?

W3C hiện không có đề xuất nào về việc chuyển đổi hình ảnh nền. Nó sẽ cực kỳ hữu ích, vì vậy tôi nghi ngờ rằng một cái gì đó cuối cùng sẽ xuất hiện, nhưng nó sẽ không giúp ích 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 vụ hack thêm hình nền vào phần tử giả: before hoặc: after, không phải vào vùng chứa mẹ. Phần tử giả có thể biến đổi độc lập.

Chỉ chuyển đổi nền

Vùng chứa có thể không có bất kỳ kiểu nào, nhưng nó cần ở vị trí: tương đối vì phần tử giả của chúng ta được định vị bên trong. Ngoài ra, hãy đặt tràn: ẩn, nếu không nền sẽ chảy ra bên 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 z-index được đặt 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: before (nội dung: ""; vị trí: tuyệt đối; chiều rộng: 200%; chiều cao: 200%; trên cùng: -50%; trái: -50%; z-index: -1; background: url (background.png ) 0 0 lặp lại; -webkit-biến đổi: xoay (30deg); -moz-biến đổi: xoay (30deg); -ms-biến đổi: xoay (30deg); -o-biến đổi: 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 để vừa hoàn toàn với nền.

Sửa nền của các yếu tố có thể biến đổi

Bất kỳ biến đổi nào trên vùng chứa mẹ cũng áp dụng cho các phần tử giả. Vì vậy, chúng ta cần hoàn tác chuyển đổi, ví dụ: nếu vùng chứa được xoay 30 độ, nền phải xoay -30 độ để nó ở vị trí cố định:

#myelement (vị trí: tương đối; tràn: ẩn; -webkit-biến đổi: xoay (30deg); -moz-biến đổi: xoay (30deg); -ms-biến đổi: xoay (30deg); -o-biến đổi: 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%; trái: -50%; chỉ số z: - 1; background: url (background.png) 0 0 lặp lại; -webkit-biến đổi: xoay (-30deg); -moz-biến đổi: xoay (-30deg); -ms-biến đổi: 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í để nền vừa đủ với vùng chứa mẹ.

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 hoạt động trên IE9, Firefox, Chrome, Safari và Opera. IE8 sẽ không hiển thị bất kỳ biến đổi nào, nhưng nền sẽ xuất hiện.

IE6 và 7 không hỗ trợ phần tử giả, vì vậy 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 và sau đó đặt nó thành không bằng cách sử dụng bộ chọn hiện đại hoặc nhận xét có điều kiện.

Hàm xoay () trong CSS thực hiện một phép biến đổi xoay hai chiều trên một phần tử xung quanh một tâm cố định. Đồng thời, 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 liền kề. 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, vì vậy nó phải được chuyển đến 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. Sự quay được thực hiện trong không gian hai chiều. Đối với biến đổi 3D, có các hàm trong CSS xoayX (), xoayY (), xoayZ () và xoay3d ().

Không gian ban đầu bị chiếm bởi phần tử trên trang 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 làm dịch 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 thuộc 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 hướng chuyển động của kim đồng hồ, chiều âm - chiều ngược lại.

Tâm quay

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 phải sử dụng thuộc tính gốc chuyển đổi.

Theo mặc định, nó cần ba tham số xác định tọa độ X, Y và Z. Nhưng vì xoay () trong CSS là một phép biến đổi hai chiều, bạn chỉ cần chuyển hai giá trị.

Phần tử (biến đổi: xoay (45deg); biến đổi-origin: 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, dưới dạng phần trăm của kích thước khối hoặc sử dụng các từ khóa trên cùng, dưới cùng, trái, phải. Điểm gốc nằm ở góc trên bên trái của hộp hình chữ nhật.

Hoạt ảnh xoay

Thuộc tính chuyển đổi có lợi cho các thay đổi động, do đó CSS ​​cho phép hoạt ảnh xoay một phần tử trong không gian hai chiều.

Nếu bạn cần xoay một đối tượng để đáp ứng với một hành động tùy chỉnh cụ thể, chẳng hạn như di chuột qua, bạn có thể sử dụng thuộc tính CSS chuyển tiếp để làm chậm giá trị của các thuộc tính khác.

Phần tử (chuyển tiếp: biến đổi 2s;) phần tử: hover (biến đổi: xoay (180deg);)

Không có biến đổi nào được áp dụng cho phần tử ban đầu, nhưng khi bạn di chuột qua nó, khối sẽ xoay trơn tru 180 độ trong hai giây. Khi người dùng loại bỏ con trỏ, chuyển động quay trơn tru tương tự sẽ xảy ra về vị trí ban đầu của nó.

Một cách phức tạp hơn để tạo hoạt ảnh cho một đối tượng là xác định chuỗi khung cho nó bằng cách sử dụng thuộc tính và quy tắc @keyframes.

Phần tử (tên hoạt ảnh: xoay; thời lượng hoạt ảnh: 2 giây; hoạt ảnh-lần lặp-đếm: vô hạn; hoạt ảnh-thời gian-chức năng: tuyến tính;) @ khung hình xoay (từ (biến đổi: xoay (0deg);) đến (biến đổi: xoay (360deg);))

Hoạt ảnh xoay được áp dụng cho phần tử được chỉ định, làm cho phần tử đó xoay hoàn toàn từ 0 đến 360 độ trong 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 định thời gian hoạt ảnh đặt hiệu ứng chuyển tiếp mượt mà. Kết hợp các thuộc tính với biến đổi xoay cho phép bạn tạo ra các hiệu ứng động đẹp mắt.

Xoay một phần tử bằng CSS 3

Mã CSS

#rotate_element (
-webkit-biến đổi: xoay (90deg); // mở rộng phần tử cho các trình duyệt khác nhau



biến đổi: xoay (90deg);
}

Căn chỉnh và dẫn hướng văn bản với CSS 3

lr-tb dòng văn bản 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 hướng theo chiều dọc và được căn trên cùng và bên phải.
bt-rl văn bản được điều hướng theo chiều dọc và được căn chỉnh ở phía dưới và bên phải.
tb-lr văn bản được điều hướng theo chiều dọc và được căn chỉnh ở trên cùng và bên trái.
bt-lr văn bản được điều hướng theo chiều dọc và được căn chỉnh ở phía dưới và bên trái.
Sử dụng cụm từ này làm ví dụ văn bản ở đây bạn có thể xem xét ảnh hưởng của các thuộc tính CSS

Mã CSS

Chữ (
chế độ viết: lr-tb; / * dòng văn bản từ trái sang phải * /
}

Văn bản 1 (
chế độ viết: rb-tb; / * dòng văn bản từ phải sang trái * /
}

Ví dụ về xoay văn bản 90 độ và căn chỉnh văn bản CSS 3

Mã HTML và CSS

Thí dụ xoay một phần tử 90 độ bằng CSS có thể được xem tại liên kết bên dưới.