จะหมุนภาพพื้นหลังในคอนเทนเนอร์ได้อย่างไร?


160

ฉันต้องการหมุนภาพที่วางไว้ในปุ่มแถบเลื่อนใน Chrome ตอนนี้ฉันมี CSS พร้อมเนื้อหานี้:

::-webkit-scrollbar-button:vertical:decrement
{
    background-image:url(images/arrowup.png) ;
    -webkit-transform:rotate(120deg);
    -moz-transform:rotate(120deg);
    background-repeat:no-repeat;
    background-position:center;
    background-color:#ECEEEF;
    border-color:#999;
}

ฉันต้องการหมุนภาพโดยไม่หมุนเนื้อหา


1
ฉันต้องการทำสิ่งนี้เช่นกัน มีตัวอย่างของสิ่งนี้เกิดขึ้นใน iCloud - ดูว่า vault texture หมุนเวียนอย่างไรแบบไดนามิก: icloud.com
สร้างใหม่

ที่ดูเหมือนจะเป็นเรื่องพารัลแลกซ์ ไม่สามารถบอกจากรหัสได้จริง ๆ ...
sheriffderek

ฉันเดาว่าบางทีคุณอาจไม่ต้องการคำตอบอีกแล้ว แต่บางทีคนอื่นอาจจะสนใจ นี่คือลิงค์สำหรับบทช่วยสอนที่แสดงวิธีการใช้งาน: http://www.sitepoint.com/css3-transform-background-image/
Ayoub M.

น่าเสียดายที่โซลูชันที่ให้มาทั้งหมดไม่ทำงานในแถบเลื่อน ฉันสร้างภาพแยกกัน 4 ภาพ
อะมีบา

คำตอบ:


141

ทำได้ดีมากและตอบคำถามได้ที่นี่ - http://www.sitepoint.com/css3-transform-background-image/

#myelement:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}

2
FYI คอนเทนเนอร์หมุนรอบจุดศูนย์กลางของพวกเขาในกรณีที่คุณมีปัญหาในการแปลงตามที่คุณต้องการ
Nick Larsen

ถ้ามันไม่ทำงานสำหรับองค์ประกอบทั้งหมด ตัวอย่างเช่นการไม่สามารถมีselect :before
Yann Dìnendal

1
นอกจากนี้ระวังว่า 200% อาจไม่เพียงพอในทุกกรณีเช่นในองค์ประกอบที่เป็นรูปสี่เหลี่ยมผืนผ้าเช่น 10px × 200px
Henrik Christensen

4
ใช่ แต่นี่ไม่ใช่การหมุนพื้นหลัง นี่คือแกล้งมันด้วยการประมาณ หากคุณต้องการพื้นหลังหมุนจริงจะไม่ช่วย
dev_willis

22

วิธีการที่ง่ายมากคุณหมุนไปทางเดียวและเนื้อหาอื่น ๆ ต้องใช้สี่เหลี่ยมจัตุรัสแม้ว่า

#element{
    background : url('someImage.jpg');
}
#element:hover{
    transform: rotate(-30deg);
}
#element:hover >*{
    transform: rotate(30deg);
}

1
ขอบคุณมาก! คำตอบที่ง่ายที่สุดมักเป็นคำตอบที่ดีที่สุด
Merunas Grincalaitis

7

CSS:

.reverse {
  transform: rotate(180deg);
}

.rotate {
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-name: yoyo;
  animation-timing-function: linear;
}

@keyframes yoyo {
  from { transform: rotate(  0deg); }
  to   { transform: rotate(360deg); }
}

javascript:

$(buttonElement).click(function () {
  $(".arrow").toggleClass("reverse")

  return false
})

$(buttonElement).hover(function () {
  $(".arrow").addClass("rotate")
}, function() {
  $(".arrow").removeClass("rotate")
})

PS: ฉันพบที่อื่น แต่จำไม่ได้


5

ฉันกำลังมองหาที่จะทำเช่นนี้ด้วย ฉันมีกระเบื้องขนาดใหญ่ (ภาพตัวอักษรของกระเบื้อง) ซึ่งฉันต้องการหมุนโดยประมาณ 15 องศาและทำซ้ำ คุณสามารถจินตนาการถึงขนาดของภาพที่จะทำซ้ำได้อย่างไร้รอยต่อการแสดงผล 'โปรแกรมแก้ไขภาพ' จะไม่ได้ผล

วิธีแก้ปัญหาของฉันคือยกเลิกการหมุน (เพียงสำเนาเดียว :) ภาพย่อยเป็น psuedo: ก่อนองค์ประกอบ - ปรับขนาดใหญ่ - ทำซ้ำ - ตั้งค่าคอนเทนเนอร์ล้นให้ซ่อน - และหมุนรายการที่สร้าง: ก่อนองค์ประกอบเปลี่ยน css3 ไร้สาระ!


ฉันไม่สามารถ "จินตนาการขนาดของภาพที่จะทำซ้ำได้อย่างลงตัว" เป็นใหญ่มาก ...
sheriffderek

1
ถ้าคุณต้องการให้เอียงพื้นหลังของภาพ?
Jason

4

อัปเดต 2020, พฤษภาคม:

การตั้งค่าposition: absoluteแล้วtransform: rotate(45deg)จะให้พื้นหลัง:

div {
  height: 200px;
  width: 200px;
  outline: 2px dashed slateBlue;
  overflow: hidden;
}
div img {
  position: absolute;
  transform: rotate(45deg);
  z-index: -1;
  top: 40px;
  left: 40px;
}
<div>
  <img src="https://placekitten.com/120/120" />
  <h1>Hello World!</h1>
</div>

คำตอบเดิม:

ในกรณีของฉันขนาดภาพไม่ใหญ่จนฉันไม่สามารถคัดลอกหมุนได้ photoshopดังนั้นภาพที่ได้รับการหมุนด้วย เพื่อทางเลือกphotoshopสำหรับภาพหมุนเป็นเครื่องมือออนไลน์เกินไปสำหรับการหมุนภาพ เมื่อหมุนแล้วฉันจะทำงานกับrotated-imageในbackgroundสถานที่

div.with-background {
    background-image: url(/img/rotated-image.png);
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: top center;
}

โชคดี...

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.