Xoay chữ cái 90 độ CSS

Việc định vị chính xác văn bản đã xoay luôn là một rắc rối. Đặc biệt là để định vị văn bản đó ở góc hoặc các cạnh của phần tử khác

Không cần phải làm phiền bản thân với một nhiệm vụ như vậy. Tìm bên dưới tất cả các trường hợp phổ biến. Nó phản hồi nhanh và không cần chiều rộng hoặc chiều cao được mã hóa cứng (di chuột để thay đổi hướng văn bản)

các góc

Các bên

Dưới đây là một vài lưu ý để dễ nhớ các trường hợp khác nhau

  • Luôn có một mối quan hệ giữa transform-origintop/

    .className{
        writing-mode: vertical-lr;
        text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
    }
    
    0/

    .className{
        writing-mode: vertical-lr;
        text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
    }
    
    1/

    .className{
        writing-mode: vertical-lr;
        text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
    }
    
    2. Nếu bạn sẽ sử dụng top

    .className{
        writing-mode: vertical-lr;
        text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
    }
    
    0 thì bạn sẽ cần

    .className{
        writing-mode: vertical-lr;
        text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
    }
    
    5, v.v.
  • Chúng tôi luôn xoay rồi dịch (không bao giờ ngược lại)
  • Xoay là

    .className{
        writing-mode: vertical-lr;
        text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
    }
    
    6 để định hướng văn bản ở dưới cùng và

    .className{
        writing-mode: vertical-lr;
        text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
    }
    
    7 ở trên cùng
  • Bản dịch là top0 cho các góc và top1 cho các bên. Không cần phải nhớ tất cả, thử và sai nhanh có thể cho bạn giá trị chính xác

Trên đây là cách được hỗ trợ nhiều nhất để đạt được những gì chúng tôi muốn nhưng chúng tôi có thể thực hiện dễ dàng hơn bằng cách sử dụng top2

các góc

Các bên

Không có gì để nhớ ở đây 😉


Các vị trí phổ biến hơn (mà chúng ta có thể dễ dàng tìm thấy ở trên)


Bạn muốn hỗ trợ tôi?

Xoay chữ cái 90 độ CSS

HOẶC

Xoay chữ cái 90 độ CSS

CSS cung cấp nhiều cách để xoay văn bản theo chiều dọc, chiều ngang, phải sang trái, trái sang phải hoặc xoay theo các mức độ cụ thể, v.v. Các phương thức này là chế độ viết, định hướng văn bản và hàm Rotate(). Các ngôn ngữ khác nhau có định hướng văn bản khác nhau, do đó, nếu trang web đại diện cho các ngôn ngữ như tiếng Trung, tiếng Nhật, tiếng Việt, tiếng Hàn, v.v. chúng tôi được yêu cầu xoay văn bản. Ngoài ra, trong một số trường hợp, chúng tôi tìm thấy các văn bản được xoay trong sách giáo khoa cho các tiêu đề hoặc biểu đồ và bản đồ

điều kiện tiên quyết

cú pháp

Có nhiều cách chúng ta có thể xoay văn bản CSS bằng cách sử dụng các cấu trúc CSS

Cách đầu tiên là sử dụng thuộc tính chế độ viết của CSS

.className{
   writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-lr | sideways-rl;
}

Một cách khác để xoay văn bản trong CSS là sử dụng thuộc tính text-orientation trong CSS

.className{
    writing-mode: vertical-lr;
    text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation;
}

Chúng ta có thể sử dụng chức năng Xoay và các biến thể của nó để áp dụng CSS xoay văn bản. Ở đây chúng tôi sử dụng thuộc tính biến đổi của CSS

.className{
    transform: rotate();
}

Thí dụ

Xoay văn bản CSS. Sử dụng chế độ viết

Có thể đạt được CSS xoay văn bản bằng cách sử dụng thuộc tính CSS chế độ viết. Nó đặt các dòng văn bản theo chiều ngang hoặc chiều dọc, cũng như hướng tiến trình của khối i. e. từ phải sang trái, từ trái để viết hoặc từ trên xuống dưới

Năm giá trị khác nhau cho chế độ viết để xoay văn bản CSS được đưa ra bên dưới

a) ngang-tb

Dòng văn bản nằm ngang và các dòng văn bản được sắp xếp theo kiểu từ trên xuống dưới

b) dọc-rl

Hướng của dòng chảy của văn bản là dọc. Các dòng văn bản được sắp xếp theo thứ tự từ phải sang trái. Dòng văn bản đầu tiên nằm ở ngoài cùng bên phải và dòng cuối cùng ở vị trí ngoài cùng bên trái

c) dọc-lr

Hướng của dòng chảy của văn bản là dọc. Các dòng văn bản được sắp xếp từ trái sang phải. Dòng đầu tiên của văn bản nằm ở phía ngoài cùng bên trái và dòng cuối cùng ở vị trí ngoài cùng bên phải

d) đi ngang-rl

Đối với các tập lệnh từ trái sang phải, luồng nội dung sẽ từ dưới lên trên. Tất cả các glyphs, bao gồm cả những cái dọc, được đặt nghiêng về bên phải

e) đi ngang-lr

Đối với các tập lệnh từ trái sang phải, nội dung sẽ chảy từ trên xuống dưới. Tất cả các glyphs, bao gồm cả những cái dọc, được đặt nghiêng về bên trái

Ghi chú. sideways-lr và sideways-rl là thử nghiệm và hành vi của chúng có thể thay đổi trong tương lai

Ví dụ về chế độ viết

Chúng ta hãy xem một ví dụ thể hiện hành vi của tất cả các giá trị của chế độ viết cho CSS xoay văn bản. Chúng tôi sẽ viết cùng một văn bản và áp dụng các chế độ viết khác nhau cho từng người trong số họ để xem thứ tự văn bản trong đầu ra trong từng trường hợp





  
  Writing Mode



  
  Rotating Text using CSS writing-mode
  

Hey!
Horizontal-tb here.

Hey!
Vertical-lr here.

Hey!
Vertical-rl here.

đầu ra

Xoay chữ cái 90 độ CSS

Trong ví dụ trên, chúng tôi đang áp dụng ba chế độ i. e. vertical-tb, vertical-lr, vertical-rl sử dụng chế độ viết CSS cho CSS xoay văn bản. Một hộp được sử dụng để phân biệt phong cách. Mỗi bản in văn bản ở một định dạng khác nhau. Chế độ đi ngang là thử nghiệm và do đó, không được chứng minh

Giá trị định hướng văn bản

Thuộc tính text-orientation của CSS đặt hướng của các ký tự của văn bản theo kiểu đã chỉ định. Nó rất hữu ích để hiển thị các ngôn ngữ khác nhau có tập lệnh dọc

Các giá trị từ khóa được giải thích bên dưới

a) Hỗn hợp

Nó xoay các ký tự của văn bản ngang 90° theo chiều kim đồng hồ trong khi nó hoàn toàn không ảnh hưởng đến văn bản dọc

b) Thẳng đứng

Nó bố trí các ký tự của văn bản theo chiều ngang. Trường hợp đặt chế độ viết theo chiều dọc thì nó sắp xếp từng ký tự theo thứ tự hàng dọc i. e. một trong mỗi hàng

c) Đi ngang

Nó đặt các ký tự của văn bản theo chiều ngang và sau đó toàn bộ văn bản được xoay 90° theo chiều kim đồng hồ

d) Đi ngang-phải

Nó giống như đi ngang nhưng được giữ cho mục đích tương thích

e) Định hướng sử dụng glyph

Từ khóa này cho phép chúng tôi sử dụng giá trị của các thuộc tính SVG không dùng nữa glyph-orientation-vertical và glyph-orientation-horizontal trên các phần tử SVG. SVG là viết tắt của đồ họa Vector có thể mở rộng và được sử dụng để xác định đồ họa dựa trên vector cho Web

Ví dụ định hướng văn bản

Chúng ta hãy xem tác dụng của các giá trị hỗn hợp và thẳng đứng của thuộc tính định hướng văn bản của CSS





  
  text-orientation



  
  Rotating Text using CSS text-orientation
  

Hey!
text-orientation
mixed

Hey!
text-orientation
upright

đầu ra

Xoay chữ cái 90 độ CSS

Trong ví dụ trên chế độ viết cho mỗi, văn bản được đặt theo chiều dọc. Hai văn bản khác nhau về kiểu CSS. Một cái được cung cấp định hướng văn bản hỗn hợp và định hướng văn bản thẳng đứng khác

Xoay văn bản hoạt động như thế nào trong CSS?

Văn bản và hình ảnh có thể được xoay bằng hàm rotate() trong CSS. Nó cho phép chúng ta xoay văn bản theo chiều kim đồng hồ và ngược chiều kim đồng hồ. Nó cũng được sử dụng để xoay các phần tử HTML khác

a) Xoay (giá trị góc)

Hàm xoay của CSS xác định một phép biến đổi xoay các phần tử HTML xung quanh một điểm cố định trên mặt phẳng 2D. Chúng ta có thể chuyển độ và radian và biến chúng thành tham số để xoay văn bản và các thành phần khác

Chúng ta có thể thay đổi nguồn gốc bằng cách sử dụng thuộc tính CSS transform-origin. Các phần tử sau đó được xoay quanh điểm cố định này

cú pháp

Chức năng này lấy góc cho văn bản được xoay. Góc xoay này có thể dương hoặc âm để xoay văn bản theo chiều kim đồng hồ và ngược chiều kim đồng hồ tương ứng. Nó nhận các độ như xoay (45 độ) và radian là xoay (-3. 14rad)

b) rotate3d(x,y,z,angleValue)

Nó được sử dụng để xoay các đối tượng 3d hoặc văn bản 3d theo các hướng x, y và z với các góc cụ thể

c) xoayX(angleValue)

Nó được sử dụng để xoay văn bản theo hướng x với một số góc gọi là angleValue

d) xoayY(angleValue)

Nó được sử dụng để xoay văn bản theo hướng y với một số góc gọi là angleValue

e) xoayZ(angleValue)

Nó được sử dụng để xoay văn bản theo hướng z với một số góc gọi là angleValue

text
{
    transform: rotate();
}

Thêm ví dụ

a) Hàm xoay ()

Hãy để chúng tôi lấy một ví dụ về một trang hiển thị những sự thật đáng kinh ngạc về máy tính. Chúng tôi sẽ viết Sự kiện máy tính theo chiều dọc ở bên phải của trang bằng cách sử dụng chức năng Xoay () của CSS





  
  RotateX RotateY RotateZ



  
  Today's 7 Interesting Facts
  
    
      
        

COMPUTER FACTS

  1. The first computer virus Creeper emerged in 1971.

  2. The weight of the very first computer was 27 tons.

  3. The first mouse was made of wood in 1964.

  4. Windows OS was supposed to be named Interface Manager.

  5. E-mail was launched before Internet.

  6. Google receives 1.2 trillion search requests every year, which is equal to about 40,000 every second and 3.5 billion each day.

  7. The Mozilla Firefox browser is named after a red Panda which is an asian species. Firefox is not actually a fox.

đầu ra

Xoay chữ cái 90 độ CSS

Trong ví dụ trên, hộp được xác định ở phía bên trái của trang. Màu nền của nó là màu xanh lam #2B547E và màu văn bản bên trong hộp này là màu trắng. Phần đệm và lề xác định kích thước của hộp liên quan đến văn bản

rotate1 xác định các thuộc tính của văn bản sẽ được xoay và hiển thị ở phía bên trái. Nó mô tả vòng quay tôi. e. 90 độ, cỡ chữ, chiều rộng, khoảng cách chữ, v.v. Cuối cùng, chúng tôi đặt văn bản dọc và dữ kiện bên trong một bảng sao cho chúng có thể được định vị song song trên trang web. Bảng này chỉ có một hàng và hai cột

Bây giờ, chúng ta hãy xem các phiên bản khác nhau của hàm rotate()

b) Hàm RotateX() RotateY() RotateZ()

Hãy chứng minh chuyển đổi văn bản được thực hiện bởi từng chức năng trên, cụ thể là rotateX, rotateY và rotateZ với sự trợ giúp của một ví dụ





  
  RotateX RotateY RotateZ



  
  Rotating Text using CSS Rotate

  

Original
Text

The rotation with
X-AXIS 180°

The rotation with
Y-AXIS ℼ Radians

The rotation with
Z-AXIS -180°

đầu ra

Xoay chữ cái 90 độ CSS

Trong ví dụ trên, ba hàm xoay CSS rotateX, rotateY và rotateZ được xác định để văn bản xoay CSS theo hướng X, hướng Y và hướng Z tương ứng với lượng góc được chỉ định. Hộp đầu tiên hiển thị văn bản mà không có bất kỳ xoay nào và ba hộp tiếp theo được xoay với các trục khác nhau và các góc khác nhau. Hộp thứ tư được quay ngược chiều kim đồng hồ theo hướng Z bằng cách truyền cho nó một góc âm. Hộp thứ ba được xoay bằng cách chuyển radian làm tham số