Hướng dẫn rotate image vertically css - xoay hình ảnh theo chiều dọc css

Tôi đang cố gắng xoay một hình ảnh bằng cách sử dụng biến đổi CSS sao cho nó được căn chỉnh chính xác trong vòng ____8, tức là góc trên cùng bên trái của hình ảnh phải được căn chỉnh với góc trên cùng bên trái của div.

Như bạn có thể thấy ở đây (-> Nhấp vào

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

0) Điều này không hoạt động. Có cách nào để sửa lỗi này?

.

Hỏi ngày 30 tháng 8 năm 2013 lúc 11:22Aug 30, 2013 at 11:22

fuenfundachtzigfuenfundachtzigfuenfundachtzig

7.60612 Huy hiệu vàng61 Huy hiệu bạc84 Huy hiệu đồng12 gold badges61 silver badges84 bronze badges

2

Nếu bạn muốn nó được thực hiện trong CSS, đây là cách:

.rot90 {
    -webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(90deg); /* Opera */
    transform: translateY(-100%) rotate(90deg); /* W3C */  
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

Cập nhật bản demo

Bí quyết là xoay hình ảnh xung quanh góc dưới bên trái. Sau khi hoàn thành, nó giảm 100% chiều cao; dịch nó và bây giờ nó là ok.

Để có được hiệu ứng tương tự cho vòng quay nghịch đảo: (di chuột để biến đổi)

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

Đã trả lời ngày 30 tháng 8 năm 2013 lúc 17:48Aug 30, 2013 at 17:48

2

Sử dụng một số jQuery, bạn có thể nhận được

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

1 của cha mẹ, trừ đi từ

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

1 mới và sử dụng lề để đưa nó trở lại container. Nó hoạt động với tất cả các vòng quay. Đây là fiddle.

JS:

function rotate(elm, deg) {
    var offsetContLeft, offsetContTop, offsetLeft, offsetTop, newLeft, newTop;
    $(elm).css('transform', 'rotate('+ deg +'deg)');
    // Get the container offset
    offsetContLeft = $(elm).parent().offset().left;
    offsetContTop= $(elm).parent().offset().top;
    // get the new rotated offset
    offsetLeft = $(elm).offset().left;
    offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    newLeft = offsetContLeft - offsetLeft;
    newTop = offsetContTop - offsetTop;
    // Apply the new offsets to the margin of the element.
    $(elm).css('margin-left', newLeft).css('margin-top', newTop);
}

$("#myrotate").click(function (e) { 
      // pass in the element to rotate and the desired rotation.
      rotate('#myimage', 90);
});

Đã trả lời ngày 30 tháng 8 năm 2013 lúc 13:09Aug 30, 2013 at 13:09

1

Từ các câu trả lời được đưa ra cho đến nay tôi cho rằng không có cách tiếp cận đơn giản hơn so với việc sử dụng JavaScript để "sắp xếp lại" hình ảnh. Do đó, hãy để tôi chia sẻ cách tiếp cận mà tôi đã sử dụng:

var step = 0;

$("#myrotate").click(
  function (e) { 
    step += 1;
    var img = $("#myimage");
    img.css('transform', 'rotate('+ step*90 +'deg)'); // could be extended to work also in older browsers
    var d = img.width() - img.height();
    img.css('margin-left', -d/2*(step%2));
    img.css('margin-top',   d/2*(step%2));
  }
);

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

3 là

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

4 của

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

5 mà tôi lạm dụng là công tắc,

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

6 là (đoán)

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

4 của

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

8 để xoay.

Hãy thử nó ở đây.

Đã trả lời ngày 30 tháng 8 năm 2013 lúc 15:09Aug 30, 2013 at 15:09

fuenfundachtzigfuenfundachtzigfuenfundachtzig

7.60612 Huy hiệu vàng61 Huy hiệu bạc84 Huy hiệu đồng12 gold badges61 silver badges84 bronze badges

0

Nếu bạn muốn nó được thực hiện trong CSS, đây là cách:

function rotateImage(elm, deg) {
    $(elm).css('margin-left', 0).css('margin-top', 0);
    $(elm).css('transform', 'rotate(' + deg + 'deg)');
    // Get the container offset
    var offsetContLeft = $(elm).parent().offset().left;
    var offsetContTop = $(elm).parent().offset().top;
    // get the new rotated offset
    var offsetLeft = $(elm).offset().left;
    var offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1;
    var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1;
    $("#a").text(newOffsetX + "-" + newOffsetY)
    // Apply the new offsets to the margin of the element.
      $(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY)
          .css('margin-right', newOffsetX).css('margin-bottom', newOffsetY);
}
var rot = 0;
$("#myrotate").click(function (e) { 
rot += 15;
      rotateImage('#myimage', rot);
});

Cập nhật bản demo

Bí quyết là xoay hình ảnh xung quanh góc dưới bên trái. Sau khi hoàn thành, nó giảm 100% chiều cao; dịch nó và bây giờ nó là ok.Apr 6, 2019 at 1:35

Để có được hiệu ứng tương tự cho vòng quay nghịch đảo: (di chuột để biến đổi)

Đã trả lời ngày 30 tháng 8 năm 2013 lúc 17:48

Sử dụng một số jQuery, bạn có thể nhận được

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

1 của cha mẹ, trừ đi từ

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

1 mới và sử dụng lề để đưa nó trở lại container. Nó hoạt động với tất cả các vòng quay. Đây là fiddle.

Đã trả lời ngày 30 tháng 8 năm 2013 lúc 13:09

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

9

Từ các câu trả lời được đưa ra cho đến nay tôi cho rằng không có cách tiếp cận đơn giản hơn so với việc sử dụng JavaScript để "sắp xếp lại" hình ảnh. Do đó, hãy để tôi chia sẻ cách tiếp cận mà tôi đã sử dụng:

img.rotate_0 {
  -webkit-transform: rotate(0deg);
  -webkit-transform-origin: center center;
}

img.rotate_270 {
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: top right;
}

img.rotate_180 {
  -webkit-transform: rotate(180deg);
  -webkit-transform-origin: center center;
}

img.rotate_90 {
  -webkit-transform: translateX(-100%) rotate(270deg);
  -webkit-transform-origin: top right;
} 

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

3 là

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

4 của

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

5 mà tôi lạm dụng là công tắc,

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

6 là (đoán)

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

4 của

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}

8 để xoay.

0

Hãy thử nó ở đây.

Đã trả lời ngày 30 tháng 8 năm 2013 lúc 15:09Sep 30, 2021 at 7:52

Tôi lấy ví dụ về stack bên trái @Lost và thay đổi nó để hoạt động với tất cả các vòng quay và lặp đi lặp lại. Đặt lại tỷ suất lợi nhuận cho các vòng quay lặp đi lặp lại. Cũng đặt lề phải và dưới cùng.Kiruna

Ví dụ: http://jsfiddle.net/v4qa0x5g/2/7 bronze badges