পাত্রে পটভূমি চিত্রটি কীভাবে ঘোরানো যায়?

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

আমি এটিও করতে চাই আইক্লাউডে এরকম কিছু ঘটনার উদাহরণ রয়েছে - দেখুন কীভাবে ভল্টের টেক্সচারটি গতিশীলভাবে ঘোরে: আইক্লাউড ডটকম

— সাবক্রিপশন

এটি দেখতে কিছুটা প্যারালাক্স জিনিসের মতো। কোড থেকে আসলেই বলতে পারেনি ...

— শেরিফডেরেক

আমি অনুমান করি যে সম্ভবত আপনার আর উত্তর এবং উত্তর প্রয়োজন নেই তবে হয়ত অন্য কারও আগ্রহী। টিউটোরিয়ালটির জন্য এখানে একটি লিঙ্ক দেওয়া আছে যা এটি কীভাবে করবেন তা দেখায়: http://www.sitepPoint.com/css3-transfor-background-image/

— আইয়ুব এম।

দুর্ভাগ্যক্রমে প্রদত্ত সমস্ত সমাধানই স্ক্রোল বারগুলিতে কাজ করে না। আমি 4 টি আলাদা ছবি তৈরি করে শেষ করেছি।

— অ্যামিবে

আরও দেখুন: CSS3 এর সাথে একটি পটভূমি চিত্র

— ঘোরানো

Answer 1

এখানে খুব ভালভাবে সম্পন্ন হয়েছে এবং উত্তর দেওয়া হয়েছে - http://www.sitepPoint.com/css3-transfor-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

এফওয়াইআই, পাত্রে তাদের কেন্দ্রবিন্দুটি ঘোরান, যদি আপনি চান ঠিক রূপান্তরটি পেতে সমস্যা হয়।

— নিক

তাই, এটি সমস্ত উপাদানগুলির জন্য কাজ করে না; উদাহরণস্বরূপ, একটিতে একটি থাকতে selectপারে না :before।

— ইয়ান দানেনডাল

এছাড়াও, সাবধান যে 200% সমস্ত ক্ষেত্রে যেমন পর্যাপ্ত পরিমাণে 10px × 200px না পর্যাপ্ত হতে পারে obl

— হেনরিক ক্রিস্টেনসেন

হ্যাঁ, কিন্তু এই হয় না পটভূমি আবর্তিত। এটি একটি আনুমানিক সঙ্গে জাল হয়। আপনার যদি পটভূমিটি ঘোরার জন্য প্রয়োজন হয় তবে এটি কোনও লাভ করবে না।

— দেব_উইলিস

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

javascript:

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

  return false
})

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

পিএস: আমি এটি অন্য কোথাও খুঁজে পেয়েছি তবে উত্সটি মনে নেই

Answer 4

আমি এটি করতে খুঁজছেন। আমার কাছে একটি বড় টাইল (আক্ষরিক অর্থে একটি টাইলের চিত্র) চিত্র রয়েছে যা আমি প্রায় 15 ডিগ্রি ঘোরানো এবং পুনরাবৃত্তি করতে চাই। আপনি এমন কোনও চিত্রের আকারটি কল্পনা করতে পারেন যা 'ইমেজ সম্পাদনা প্রোগ্রাম' উত্তরটি অকেজো বলে উপস্থাপন করে অবিচ্ছিন্নভাবে পুনরাবৃত্তি করবে।

আমার সমাধানটি অ-ঘোরানো হয়েছে (কেবলমাত্র একটি কপি :) টাইল চিত্র চিত্রিতভাবে দেওয়া হয়েছে: এলিমেন্টের আগে - এটি আকারে বড় করুন - এটি পুনরাবৃত্তি করুন - ধারকটির ওভারফ্লো গোপনে সেট করুন - এবং উত্পাদিত ঘোরান: উপাদানটি 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;
}

শুভকামনা ...