कंटेनर में पृष्ठभूमि छवि को कैसे घुमाएं?

Question

मैं उस छवि को घुमाना चाहता हूं जो क्रोम में स्क्रॉलबार के बटन में रखी गई है। अब मेरे पास इस सामग्री के साथ एक सीएसएस है:

::-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;
}

मैं इसकी सामग्री को घुमाए बिना छवि को घुमाना चाहता हूं।

Comments

मैं यह भी करना चाहूंगा। वहाँ कुछ इस तरह का एक उदाहरण है iCloud पर हो रहा है - देखें कि वॉल्ट की बनावट कैसे गतिशील रूप से घूमती है: icloud.com

— उपसंहार

यह एक लंबन चीज की तरह थोड़े दिखता है। हालांकि कोड से वास्तव में नहीं बता सकता ...

— sheriffderek

मुझे लगता है कि शायद अब आपको कोई ज़रूरत नहीं है और जवाब देना है लेकिन शायद किसी और को दिलचस्पी होगी। यहाँ एक ट्यूटोरियल के लिए एक लिंक है जो यह दिखाता है कि यह कैसे करना है: http://www.sitepoint.com/css3-transform-background-image/

— Ayoub M.

दुर्भाग्य से प्रदान किए गए सभी समाधान स्क्रॉल बार में काम नहीं करते हैं। मैंने 4 अलग चित्र बनाए।

— एमोबे

इसे भी देखें: CSS3 के साथ एक बैकग्राउंड इमेज को

— रोटेट करना

Answer 1

बहुत अच्छा किया और यहाँ उत्तर दिया - 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);
}

Comments

FYI करें, कंटेनर अपने केंद्र बिंदु के बारे में घुमाते हैं, अगर आपको ठीक वही परिवर्तन प्राप्त करने में परेशानी हो रही है जो आप चाहते हैं।

— निक लार्सन

फी, यह सभी तत्वों के लिए काम नहीं करता है; उदाहरण के लिए, एक selectनहीं हो सकता है :before।

— यन दोनेंडल

इसके अलावा, सावधान रहें कि 200% सभी मामलों में पर्याप्त नहीं हो सकते हैं, अर्थात 10px × 200px जैसे मूल तत्वों पर।

— हेनरिक क्रिस्टेंसन

हाँ, लेकिन यह पृष्ठभूमि को घुमा नहीं रहा है । यह इसे अंदाजे से फेक रहा है। यदि आपको वास्तव में बैकग्राउंड को घुमाए जाने की आवश्यकता है तो यह मदद नहीं करेगा।

— dev_willis

Answer 2

बहुत आसान विधि, आप एक तरह से घुमाते हैं, और दूसरी सामग्री। हालांकि एक वर्ग की आवश्यकता है

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

Comments

धन्यवाद भाई! सबसे सरल उत्तर आमतौर पर सबसे अच्छे होते हैं

— मेरुनास ग्रिंकलाइटिस

Answer 3

सीएसएस:

.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); }
}

जावास्क्रिप्ट:

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

  return false
})

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

पुनश्च: मैंने इसे कहीं और पाया है लेकिन स्रोत याद नहीं है

Answer 4

मैं ऐसा करना भी चाह रहा था। मेरे पास एक बड़ी टाइल (शाब्दिक रूप से एक टाइल की छवि) की छवि है जिसे मैं सिर्फ 15 डिग्री तक घुमाना चाहता हूं और दोहराया है। आप एक ऐसी छवि के आकार की कल्पना कर सकते हैं, जो 'छवि संपादन कार्यक्रम' को बेकार करते हुए सीमलेस रिपीट होगी।

मेरा समाधान संयुक्त राष्ट्र को घुमाया गया था (बस एक प्रति :) टाइल छवि psuedo के लिए: तत्व से पहले - इसे ओवरसाइज करें - इसे दोहराएं - कंटेनर ओवरफ्लो को छिपाकर सेट करें - और उत्पन्न को घुमाएं: तत्व से पहले css3 ट्रांसफॉर्म का उपयोग करते हुए। बकवास!

Comments

मैं "एक ऐसी छवि के आकार की कल्पना नहीं कर सकता हूं, जो मूल रूप से दोहराई जाए" बहुत बड़ा ...

— शेरिफडेरेक

क्या होगा यदि आप चाहते हैं कि आपकी आधार पृष्ठभूमि छवि झुकी हो?

— जेसन

Answer 5

अद्यतन 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;
}

शुभ लाभ...