Nếu những gì bạn đang tìm kiếm là một cách để đặt loại theo chiều dọc, thì bạn đặt cược tốt nhất có lẽ là CSS Nếu bạn chỉ đang cố gắng biến một số văn bản, bạn có thể xoay toàn bộ các yếu tố như thế này, nó xoay nó 90 độ ngược chiều kim đồng hồ: Thuộc tính xoay của bộ lọc cơ bản của Internet Explorer có thể chấp nhận một trong bốn giá trị: 0, 1, 2 hoặc 3 sẽ xoay phần tử 0, 90, 180 hoặc 270 độ tương ứng. Cũng xem bài viết trên blog này về các tiêu đề sang một bên. Xem các tiêu đề đi ngang của Chris Coyier [@Chriscoyier] trên Codepen. Xem vòng xoay tiêu đề sang một bên của Graham Clark [@cheesetoast] trên Codepen.writing-mode
..rotate {
transform: rotate[-90deg];
/* Legacy vendor prefixes that you probably don't need... */
/* Safari */
-webkit-transform: rotate[-90deg];
/* Firefox */
-moz-transform: rotate[-90deg];
/* IE */
-ms-transform: rotate[-90deg];
/* Opera */
-o-transform: rotate[-90deg];
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage[rotation=3];
}
Sideways Headers by Chris Coyier
[@chriscoyier]
on CodePen.
Sideways Header Rotation by Graham Clark
[@Cheesetoast]
on CodePen.
Bảng BCD chỉ tải trong trình duyệt Hàm Điểm cố định mà phần tử xoay xung quanh - được đề cập ở trên - còn được gọi là nguồn gốc biến đổi. Điều này mặc định là trung tâm của phần tử, nhưng bạn có thể đặt nguồn gốc biến đổi tùy chỉnh của riêng mình bằng thuộc tính Lượng xoay được tạo bởi Giá trịrotate[]
CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a data
type.
Xem thêm
rotate[]
CSS xác định một phép biến đổi xoay một phần tử xung quanh một điểm cố định trên mặt phẳng 2D, mà không làm biến dạng nó. Kết quả của nó là một loại dữ liệu .transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the
transform-origin
property. Thử nó
transform-origin
.Cú pháp
rotate[]
được chỉ định bởi một ____10. Nếu tích cực, chuyển động sẽ theo chiều kim đồng hồ; Nếu tiêu cực, nó sẽ là ngược chiều kim đồng hồ. Một vòng quay bằng 180 ° được gọi là phản xạ điểm.Ví dụ
Ví dụ cơ bản
HTML
Normal
Rotated
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate[45deg]; /* Equal to rotateZ[45deg] */
background-color: pink;
}
Kết quả
Kết hợp xoay vòng với một phép biến đổi khác
Nếu bạn muốn áp dụng nhiều biến đổi cho một yếu tố, hãy cẩn thận về thứ tự bạn chỉ định các phép biến đổi của mình. Ví dụ: nếu bạn xoay trước khi dịch, bản dịch sẽ dọc theo trục xoay mới!
HTML
Normal
Rotated
Rotated + Translated
Translated + Rotated
CSS
div {
position: absolute;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
background-color: lightgray;
}
.rotate {
background-color: transparent;
outline: 2px dashed;
transform: rotate[45deg];
}
.rotate-translate {
background-color: pink;
transform: rotate[45deg] translateX[180px];
}
.translate-rotate {
background-color: gold;
transform: translateX[180px] rotate[45deg];
}
Kết quả
Kết hợp xoay vòng với một phép biến đổi khác
Thông số kỹ thuật # funcdef-transform-rotate |
Sự chỉ rõ
CSS biến đổi mô-đun cấp 1 # funcdef-chuyển đổi-rotate