সিএসএস ব্যবহার করে পটভূমি চিত্রটি কীভাবে ফ্লিপ করবেন?

Question

সিএসএস ব্যবহার করে যে কোনও পটভূমি চিত্র ফ্লিপ করবেন কীভাবে? এটা কি সম্ভব?

currenty আমি এই তীর ইমেজ ব্যবহার করছি background-imageএর liCSS এ

চালু: visitedআমার এই তীরটিকে অনুভূমিকভাবে ফ্লিপ করতে হবে। আমি তীর আরেকটি চিত্র তৈরি করতে এই কাজ করতে পারেন কিন্তু আমি শুধু জানতে কৌতুহলী এটা জন্য CSS ইমেজ টুসকি করা সম্ভব:visited

Comments

ভাল প্রশ্ন! এটি বিভিন্ন ক্ষেত্রে ব্যবহার করতে পারে।

— অ্যাশব্রেড

@ আশব্রাদ - মন্তব্যের জন্য ধন্যবাদ। হ্যাঁ এটি অনেক পরিস্থিতিতে কার্যকর হতে পারে

— জিতেন্দ্র ব্যাস

Answer 1

আপনি এটি সিএসএস দিয়ে অনুভূমিকভাবে উল্টাতে পারবেন ...

a:visited {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsFizz ।

আপনি যদি এর পরিবর্তে উল্লম্বভাবে ফ্লপ করতে চান ...

a:visited {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

উত্স ।

Comments

আমি যদি কেবল ওয়েব-কিট ব্রাউজারগুলি বিবেচনা করি তবেই কেবল -webkit-transform: scaleX(-1);যথেষ্ট?

— জিতেন্দ্র ব্যাস

@ জিতেন্দ্র এটি হওয়া উচিত, এছাড়াও নন-ভেন্ডর উপসর্গযুক্ত সম্পত্তি।

— অ্যালেক্স

@ অ্যালেক্স - এতে একটি সমস্যা। এটি পাঠ্যটি <a>উল্টে দিচ্ছে যা ভিতরে রয়েছে এবং আমি কেবল ব্যাকগ্রাউন্ডের চিত্রটি ফ্লিপ করতে চাই। আপনি যে কোডটি দিচ্ছেন তা হ'ল পুরো উপাদানটি ফ্লিপ করা

— জিতেন্দ্র ব্যাস

@ জিতেন্দ্র এটিকে দেখে মনে হচ্ছে না আপনি কেবল পটভূমির চিত্রটি সরিয়ে ফেলতে পারেন। আপনি আইকনটি spanএকটিতে রাখতে পারেন এবং তারপরে এটি ফ্লিপ করতে পারেন।

— অ্যালেক্স

@ অ্যালেক্স - ঠিক আছে আমি যদি এই কোডটি ব্যবহার করি তবে <li><a href="#"><span>text</span></a></li>এটি টেক্সটটিও উল্টিয়ে দিচ্ছে তাই পাঠ্যকে সরিয়ে ফেলার জন্য আপনার দেওয়া কোডের বিপরীতে কী হবে যাতে আমি li a span { }সিএসএস

— জিতেন্দ্র ব্যাস

Answer 2

অ্যালেক্সের উত্তরে উল্টানোর কোনও ক্লু দেখার পরেও আমি পুরো পটভূমি পুরোপুরি নয় কেবল পটভূমি ফ্লিপ করার উপায় পেয়েছি। আপনার উত্তরের জন্য ধন্যবাদ অ্যালেক্স

এইচটিএমএল

<div class="prev"><a href="">Previous</a></div>
<div class="next"><a href="">Next</a></div>

সিএসএস

.next a, .prev a {
    width:200px;
    background:#fff
}
 .next {
    float:left
}
 .prev {
    float:right
}
 .prev a:before, .next a:before {
    content:"";
    width:16px;
    height:16px;
    margin:0 5px 0 0;
    background:url(http://i.stack.imgur.com/ah0iN.png) no-repeat 0 0;
    display:inline-block 
}
 .next a:before {
    margin:0 0 0 5px;
    transform:scaleX(-1);
}

এখানে উদাহরণ দেখুন http://jsfiddle.net/qngrf/807/

Comments

@ জিতেন্দ্র আপনি কি জিসফিলের URL টি পরীক্ষা করতে পারেন? আমি মনে করি আপনি নিজের উত্তরে পোস্ট করেছেন একই কোড এটি + এটি কাজ করছে না ..

— sachinjain024

আপনার পোস্ট করা জিএসফিডেল কোডটি কি পাঠ্যটি ফ্লিপ করছে? এটি কি আপনি চান, বা কেবল পটভূমি চিত্র?

— মান্দজা

আপনার jsfiddle কোড মত একই নয়, আপনি দয়া করে এটি আপডেট করতে পারেন?

— রই নমির

@ জিতেন্দ্রভ্যাস ২০১ 2016 সাল থেকে হ্যালো! আমি জাস্টফিডেল ইউআরএল ঠিক করার জন্য একটি সম্পাদনা করার পরামর্শ দিচ্ছিলাম কারণ এটি এখনও আপনার উত্তরের তুলনায় বিভিন্ন কোডের সাথে লিঙ্ক করে আছে - পোস্টটি সম্পাদনা করতে বা লিঙ্কটি সরাতে যত্নবান? ধন্যবাদ :)

— পুরোপুরি নটলিজার্ডস

-webkit-transform:scaleX(-1);ক্রোমের জন্য

— ওয়েসলি স্মিথ

Answer 3

ডাব্লু 3 স্কুল অনুসারে: http://www.w3schools.com/cssref/css3_pr_transform.asp

রূপান্তর বৈশিষ্ট্যটি ইন্টারনেট এক্সপ্লোরার 10, ফায়ারফক্স এবং অপেরাতে সমর্থিত। ইন্টারনেট এক্সপ্লোরার 9 একটি বিকল্প, -ms- রূপান্তর সম্পত্তি (2D রূপান্তর কেবল) সমর্থন করে। সাফারি এবং ক্রোম বিকল্প, -উইবকিট-ট্রান্সফর্ম সম্পত্তি (3 ডি এবং 2 ডি রূপান্তর) সমর্থন করে। অপেরা কেবলমাত্র 2 ডি রূপান্তরগুলিকে সমর্থন করে।

এটি একটি 2 ডি রূপান্তর, সুতরাং এটি ক্রোম, ফায়ারফক্স, অপেরা, সাফারি এবং আই 9 + + তে বিক্রেতার উপসর্গগুলির সাথে কাজ করা উচিত।

অন্যান্য উত্তর ব্যবহার করা হয়েছে: অভ্যন্তরীণ সামগ্রীতে উল্টানো থেকে বিরত রাখার আগে। আমি এটি আমার ফুটারে ব্যবহার করেছি (আমার শিরোনাম থেকে চিত্রটি উল্লম্বভাবে-মিরর করতে):

এইচটিএমএল:

<footer>
<p><a href="page">Footer Link</a></p>
<p>&copy; 2014 Company</p>
</footer>

সিএসএস:

footer {
background:url(/img/headerbg.png) repeat-x 0 0;

/* flip background vertically */
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

/* undo the vertical flip for all child elements */
footer * {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
}

সুতরাং আপনি উপাদানটি উল্টানো এবং তারপরে তার সমস্ত শিশুদের পুনরায় উল্টানো শেষ করুন। নেস্টেড উপাদানগুলির সাথেও কাজ করে।

Comments

উত্তর করার জন্য ধন্যবাদ! এইটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে, যেহেতু অন্যরা হয় সমস্ত বাচ্চাদেরও খুব উল্টায় ফেলেছিল বা ফ্লিপটি উল্টানোর জন্য আরও জটিল কৌশল প্রয়োজন।

— অস্টিন সালগাত

যদি এই উত্তরটি আপনার লক্ষ্যযুক্ত উপাদানটির অভ্যন্তরে সমস্ত কিছু ফ্লিপ করে তবে কেবল এটিকে অন্য উপাদানটিতে চাপ দিন। অন্য কথায়, যে সামগ্রীটি আপনি চান না তা কোনও নতুন <ডিভ> উপাদানটির মধ্যে ফ্লিপ করতে চান rap

— ওনোসা

Answer 4

গেকো-ভিত্তিক ব্রাউজারগুলির জন্য এটি মূল্যবান, :visitedফলস্বরূপ গোপনীয়তা ফাঁসের কারণে আপনি এই জিনিসটিকে বন্ধ রাখতে পারবেন না । Http://hacks.mozilla.org/2010/03/privacy-related-changes- आगामी-to-css-vistited/ দেখুন

Answer 5

আপনি উভয় উল্লম্ব এবং অনুভূমিক টুসকি করতে একই সময়ে

    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);

এবং রূপান্তর সম্পত্তি সহ আপনি একটি দুর্দান্ত ফ্লিপ পেতে পারেন

    -webkit-transition: transform .4s ease-out 0ms;
    -moz-transition: transform .4s ease-out 0ms;
    -o-transition: transform .4s ease-out 0ms;
    transition: transform .4s ease-out 0ms;
    transition-property: transform;
    transition-duration: .4s;
    transition-timing-function: ease-out;
    transition-delay: 0ms;

প্রকৃতপক্ষে এটি পুরো উপাদানটিকে উল্টায় , কেবল নাbackground-image

SNIPPET

function flip(){
	var myDiv = document.getElementById('myDiv');
	if (myDiv.className == 'myFlipedDiv'){
		myDiv.className = '';
	}else{
		myDiv.className = 'myFlipedDiv';
	}
}

#myDiv{
  display:inline-block;
  width:200px;
  height:20px;
  padding:90px;
  background-color:red;
  text-align:center;
  -webkit-transition:transform .4s ease-out 0ms;
  -moz-transition:transform .4s ease-out 0ms;
  -o-transition:transform .4s ease-out 0ms;
  transition:transform .4s ease-out 0ms;
  transition-property:transform;
  transition-duration:.4s;
  transition-timing-function:ease-out;
  transition-delay:0ms;
}
.myFlipedDiv{
  -moz-transform:scaleX(-1) scaleY(-1);
  -o-transform:scaleX(-1) scaleY(-1);
  -webkit-transform:scaleX(-1) scaleY(-1);
  transform:scaleX(-1) scaleY(-1);
}

<div id="myDiv">Some content here</div>

<button onclick="flip()">Click to flip</button>

Comments

"একই সাথে উলম্ব এবং অনুভূমিক উভয়ই ফ্লিপ করুন" চিত্রটি 180 ডিগ্রি ঘুরিয়ে দেওয়ার মতো একই প্রভাব ফেলেছে, সূক্ষ্মভাবে কাজ করে এবং আমি যা খুঁজছিলাম তা

— হ'ল