Hướng dẫn positioning rotated elements css - định vị các phần tử xoay css

Tôi đang gặp khó khăn khi định vị một phần tử div xoay. Cho đến nay tôi có:

#side-banner {
transform: rotate(270deg); }

mà xoay Div của tôi tốt. Tuy nhiên, tôi gặp khó khăn trong việc "ghim" nó ở phía bên trái. .

Đã hỏi ngày 15 tháng 5 năm 2013 lúc 0:48May 15, 2013 at 0:48

Hướng dẫn positioning rotated elements css - định vị các phần tử xoay css

Michael Schmidtmichael SchmidtMichael Schmidt

3841 Huy hiệu vàng3 Huy hiệu bạc14 Huy hiệu đồng1 gold badge3 silver badges14 bronze badges

2

Nếu bạn có nghĩa là bạn muốn biểu ngữ xoay và được sửa ở phía bên trái của BrowserWindow, bạn có thể sử dụng thuộc tính transform-origin. Theo mặc định, nó được đặt thành 50% 50%. Đó là 50% chiều rộng và chiều cao của phần tử (tâm của phần tử).

Bạn có thể thử đặt nguồn gốc thành 0% 0%. Đó là góc trên bên trái của biểu ngữ và sau đó xoay nó xung quanh góc đó. Bây giờ với biểu ngữ được xoay, nguồn gốc đã trở thành góc đáy bên trái của biểu ngữ. Bạn có thể định vị nó ở phía bên trái của trình duyệt như thế này:

#side-banner {
    poition:fixed;
    left:0;
    top:50%;
    width:300px; /* after rotation this is the height */
    margin-top:150px; /* is 50% of width */
    transform: rotate(270deg);
    transform-origin:0% 0%; /* set to the upper-left corner */
    -ms-transform: rotate(270deg); /* IE 9 */
    -ms-transform-origin:0% 0%; /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
    -webkit-transform-origin:0% 0%; /* Safari and Chrome */
}

Chỉnh sửa: Nếu bạn muốn biểu ngữ có cùng chiều cao với trình duyệt sau khi quay, điều đó có thể được thực hiện với JavaScript hoặc jQuery. Như thế này:
If you want the banner to be the same height as the browserwindow after the rotation, that can be done with javascript or jQuery. Like this:

var width = $(window).height();
var marginTop = Math.round(width / 2);

$('#side-banner').css({
    'width': width,
    'margin-top': marginTop
});

Đã trả lời ngày 15 tháng 5 năm 2013 lúc 1:51May 15, 2013 at 1:51

Hướng dẫn positioning rotated elements css - định vị các phần tử xoay css

Tôi chắc chắn ước gì tôi có thể để lại một bình luận thay thế, bởi vì tôi không chắc chắn 100% tôi hiểu vấn đề bạn đang gặp phải.

Tôi cảm thấy rằng vấn đề của bạn có thể được giải quyết bằng cách đóng gói biểu ngữ xoay vòng của bạn bên trong một div bình thường và đặt vị trí của container div là cố định và trái: 0px. Tôi đã thiết lập một fiddle để cho bạn thấy ý tôi là gì:

http://jsfiddle.net/q7qgn/1/

HTML:

    

bannerContainer

CSS:

 .pageContainer{
margin: 0px;
background-color: grey;
width: 400px;
height: 400px;
}

.bannerContainer{
background-color: green;
width: 100px;
height:200px;
position: fixed;
left: 0px;
}

.banner{
background-color: red;
width: 100px;
height: 100px;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}

Hi vọng điêu nay co ich!

Đã trả lời ngày 15 tháng 5 năm 2013 lúc 1:22May 15, 2013 at 1:22

Hướng dẫn positioning rotated elements css - định vị các phần tử xoay css

Hướng dẫn positioning rotated elements css - định vị các phần tử xoay css

Luôn luôn là một rắc rối để định vị chính xác một văn bản xoay. Đặc biệt là định vị văn bản như vậy ở góc hoặc các cạnh của một yếu 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ó đáp ứng và không có 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

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 từ những điều trên)
  • Bạn muốn hỗ trợ tôi?then translate (never the opposite)
  • HOẶC
  • Luôn luôn là một rắc rối để định vị chính xác một văn bản xoay. Đặc biệt là định vị văn bản như vậy ở góc hoặc các cạnh của một yếu tố khác.

Trên đây là cách được hỗ trợ nhiều nhất để đạt được những gì chúng ta muốn nhưng chúng ta có thể làm dễ dàng hơn khi sử dụng

#side-banner {
    poition:fixed;
    left:0;
    top:50%;
    width:300px; /* after rotation this is the height */
    margin-top:150px; /* is 50% of width */
    transform: rotate(270deg);
    transform-origin:0% 0%; /* set to the upper-left corner */
    -ms-transform: rotate(270deg); /* IE 9 */
    -ms-transform-origin:0% 0%; /* IE 9 */
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
    -webkit-transform-origin:0% 0%; /* Safari and Chrome */
}
8

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 từ những điều trên)


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

Hướng dẫn positioning rotated elements css - định vị các phần tử xoay css

HOẶC

Hướng dẫn positioning rotated elements css - định vị các phần tử xoay css