আপনি কি আয়না / ফ্লিপ পাঠ্যের জন্য সিএসএস ব্যবহার করতে পারেন?

Question

টেক্সট মিরর করার জন্য কি CSS / CSS3 ব্যবহার করা সম্ভব?

বিশেষত, আমার কাছে এই কাঁচি চর "✂" ( ✂) রয়েছে যা আমি বাম দিকে নির্দেশ করতে চাই এবং ডানদিকে নয়।

Comments

যদি কোনও কারণে কাঁচি চিত্রটি আপনার পক্ষে কাজ করে না, তবে আমি এটি% <এবং>% এর সাথে জাল দেখেছি

— পিট উইলসন

এই থ্রেডটি দেখুন: স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 3433641/… [1]: স্ট্যাকওভারফ্লো

— লুকাস ভাল

মিশেলের উত্তর আরও সঠিক। আপনি দয়া করে সঠিক উত্তর আপডেট করতে পারেন? কারণ আপনি যে উত্তরটি সঠিক হিসাবে চিহ্নিত করেছেন তা আয়না নয়, 180 ডিগ্রি ঘোরানো।

— সংকেত সাহু

@ পেটওয়েলসন ,? ✂ চর এত সাধারণ? এটি কি জন্য ব্যবহার করা হয়?

— পেসারিয়ার

ইমোজি বাস্তবায়নের উপর নির্ভর করে ঘূর্ণনটি ভিন্ন aware আপেল ইমোজি সেট করে এটি নীচে নির্দেশ করছে।

— আক্কুমুলেটর

Answer 1

এটি অর্জনের জন্য আপনি সিএসএস রূপান্তর ব্যবহার করতে পারেন। একটি অনুভূমিক ফ্লিপ এইভাবে ডিভ স্কেলিং জড়িত হবে:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

এবং একটি উল্লম্ব ফ্লিপ এইভাবে ডিভ স্কেলিং জড়িত হবে:

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

---

ডেমো:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

<span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span>

Comments

এটি সঠিক উত্তর হওয়া উচিত! (উলম্ব অক্ষের সাথে আয়নাগুলি, অনুভূমিক অক্ষের জন্য স্কেল (1, -1))

— অ্যাড্রিয়ান

এটি অবশ্যই আমাদের নূতন মান মেনে চলার উত্তর, দুর্ভাগ্যক্রমে আমরা এমন এক পৃথিবীতে বাস করি না যেখানে এটি বাস্তবে সমস্ত ব্যবহারের ক্ষেত্রে কাজ করে।

— ক্রিস সোবোলিউস্কি

আপনি কি আপনার উত্তরটিতে প্রকৃত ব্রাউজারের উপসর্গগুলি অন্তর্ভুক্ত করতে পারবেন? আপনি যে সিএসএস দিয়েছিলেন তা কার্যকর হয় না।

— Serrano,

@ সেরানোপিয়েরা সত্যই এই পরামর্শের জন্য ধন্যবাদ। উত্তর সংশোধিত।

— পদ্ধতিটি

নোট করুন যে সিএসএস রূপান্তরটি ফাউন্ডেশনের প্রস্তাবিত <i> ট্যাগগুলির মতো ইনলাইন উপাদানগুলিতে কাজ করে না , যদি না আপনি তখন প্রদর্শন প্রদর্শন করেন: ইনলাইন-ব্লক।

— এনগমেন্ট

Answer 2

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);

দুটি প্যারামিটার হ'ল এক্স অক্ষ, এবং ওয়াই অক্ষ, -1 একটি আয়না হবে তবে আপনি নিজের প্রয়োজন অনুসারে যে কোনও আকারের আকার নিতে পারেন। উপরের দিকে এবং পিছনে হবে(-1, -1) ।

যদি আপনি ২০১১ সালে ক্রস ব্রাউজার সমর্থনের জন্য উপলব্ধ সেরা বিকল্পটিতে আগ্রহী হন তবে আমার পুরানো উত্তরটি দেখুন ।

Comments

প্রযুক্তিগতভাবে এটি আয়না নয়। এটি ঘোরানো। সুতরাং এটি কেবল কিছু ধরণের উপাদানগুলির সাথে কাজ করবে

— বোরিরিজরফ

আমি প্রদর্শন যুক্ত না করা পর্যন্ত ক্রোমে আমার কিছু সমস্যা ছিল: আমার স্প্যানটিতে ইনলাইন-ব্লক (পিকচারো হরফ ব্যবহার করে)

— ক্লারেন্স লিউ

এই প্রশ্নটি যখন জিজ্ঞাসা করা হয়েছিল, ব্রাউজারের রূপান্তরগুলি ব্যাপকভাবে সমর্থন করা হয়নি, তখন আমি যুক্তি দেব যে এই সঠিক উত্তর ছিল। প্রকৃতপক্ষে রূপান্তরগুলি IE 9 পর্যন্ত সমর্থিত নয়, তাই আমি যুক্তি দিয়ে বলব যে এটি কমপক্ষে আরও কিছুদিনের জন্য সঠিক উত্তর রয়েছে।

— ক্রিস সোবোলিউস্কি

এই উত্তরটি ভুল, এটি কোনও আয়না নয়। এটি কেবলমাত্র এই এক ক্ষেত্রে কাজ করে কারণ উদাহরণে প্রদত্ত প্রতীকটি উল্লম্বভাবে অসম্পূর্ণ।

— gregtczap

যদিও এটি নিজের মধ্যে কার্যকর, এটি জিজ্ঞাসা করা সঠিক প্রশ্নের উত্তর নয়। আমি এই প্রশ্নটি একটি অনুসন্ধান ইঞ্জিনের মাধ্যমে পেয়েছি কারণ আমি একটি চিত্র অনুভূমিকভাবে উল্টাতে চেয়েছিলাম। এটি ওপিএস কাঁচির মতো প্রতিসম নয়।

— গিলিটেক

Answer 3

আসল আয়না:

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

Comments

আপনার সর্বদা মান-সম্মতিযুক্ত (অ-প্রিফিক্সড) বৈশিষ্ট্যটি সর্বশেষে রাখা উচিত, যাতে যখন কোনও ব্রাউজার দ্বারা স্ট্যান্ডার্ড গ্রহণ করা হয়, তখন এটি (পুরানো, বাগিগিয়ার) উপসর্গযুক্ত সংস্করণের পরিবর্তে মান-ভিত্তিক সংস্করণ ব্যবহার করবে। এই ক্ষেত্রে, এর অর্থ "রূপান্তর: ম্যাট্রিক্স (-1, 0, 0, 1, 0, 0);" শেষ সম্পত্তি হওয়া উচিত । (এটি প্রতিফলিত করার জন্য উত্তর সম্পাদনা করুন))

— জে ডানসান্দ

আমি কিনা এই সঠিক উত্তর বা প্রশ্ন থাকা উচিত জানি না কিন্তু আমি fontawesome জানাতে চাই / বুটস্ট্র্যাপ ব্যবহারকারীদের সম্পর্কে জানা fa-flip-horizontalএবং fa-flip-verticalবৈশিষ্ট্যাবলী

— তোমার

দুর্দান্ত বাস্তব উত্তর। তবে প্রদর্শন: ব্লক; অগত্যা প্রয়োজন হয় না।

— গিলি

হ্যাঁ ... প্রদর্শন: ব্লক; বা ইনলাইন-ব্লক প্রয়োজন

— ডিজিও

ওয়াই অক্ষের সাথে ঘোরার সময় কোনও এলিমেন্টের ব্যাকফেসের সঠিক পাঠ্যমুখীকরণটি রাখতে এটি সত্যই সহায়ক ছিল। প্রাক্তন হিসাবে:backface-visibility: visible; transform-origin: center center; transform-style: preserve-3d; transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg) ;

— সংসদ

Answer 4

আপনি ব্যবহারকারী করতে পারেন

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

অথবা

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

লক্ষ করুন যে, সেটিং positionথেকে absoluteখুবই গুরুত্বপূর্ণ! আপনি যদি সেট না করে থাকেন তবে আপনাকে সেট করতে হবে display: inline-block;

Answer 5

আমি ইন্টারনেট সহ স্ক্রোল করে এই সমাধানটিকে একসাথে কাটিয়েছি

• ওভারফ্লো উত্তরগুলি স্ট্যাক করুন
• এমএসডিএন নিবন্ধ,
• http://css-tricks.com/almanac/properties/t/transfor/ ,
• http://caniuse.com/#search=transfor ,
• http://browserhacks.com/ , এবং
• http://www.useragentman.com/IETransformsTranslator/ ।

এই সমাধানটি আইআই 6 সহ সমস্ত ব্রাউজারগুলিতে scale(-1,1)(একটি সঠিক আয়না) এবং যথাযথ filter/ -ms-filterবৈশিষ্ট্যগুলি যখন প্রয়োজন হয় (আই 6-8) ব্যবহার করে বলে মনে হচ্ছে :

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

Answer 6

ক্রস ব্রাউজারের সামঞ্জস্যের জন্য এই শ্রেণিটি তৈরি করুন

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

এবং এটি আপনার আইকন শ্রেণিতে যুক্ত করুন, যেমন

<i class="icon-search mirror-icon"></i>

বামদিকে হ্যান্ডেলটি দিয়ে অনুসন্ধান আইকনটি পেতে

Answer 7

আপনি এটি অর্জন করতে 'রূপান্তর' ব্যবহার করতে পারেন। http://jsfiddle.net/aRcQ8/

CSS:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

Answer 8

rotateYএকটি বাস্তব আয়না জন্য এখানে আছে :

transform: rotateY(180deg);

যা সম্ভবত আরও স্পষ্ট এবং বোধগম্য।

সম্পাদনা: যদিও ওপেনায় কাজ করছে বলে মনে হচ্ছে না ... দু: খজনকভাবে। তবে এটি ফায়ারফক্সে দুর্দান্ত কাজ করে। আমি অনুমান করি যে এটি স্পষ্টভাবে বলতে প্রয়োজন যে আমরা translate3dসম্ভবত কিছু ধরনের করছি ? বা এমন কিছু।

Comments

যারা ভাবছেন তাদের জন্য এটি 3 ডি রূপান্তর। আমি মনে করি এটি পূর্বে প্রদত্ত স্কেল এবং ম্যাট্রিক্স পদ্ধতির চেয়ে অবশ্যই বেশি পঠনযোগ্য / বোধগম্য।

— গ্রেগটকাজাপ

আমি দেখতে পাচ্ছি না যে আবর্তনটি কীভাবে একটি আয়না হয় - এটি কেবল একটি বিশেষ ক্ষেত্রে প্রদর্শিত হবে।

— সেল তীক্ষ্ণ

@ এসশার্পটি এটি ওয়াই অক্ষের উপরে রয়েছে, সুতরাং আপনি চিত্র / উপাদানটিকে এর পিছন থেকে দেখতে পাচ্ছেন, এভাবে মিরর করা।

— জেরোমেজ

Answer 9

অনুভূমিক এবং উল্লম্ব আয়না ফ্লিপের জন্য কেবল একটি ওয়ার্কিং ডেমো যুক্ত করুন।

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

Answer 10

এটিই আমার পক্ষে কাজ করেছিল <span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

কেবল প্রদর্শন প্রয়োজন: ঘোরানোর জন্য ইনলাইন-ব্লক বা ব্লক। সুতরাং মূলত প্রথম উত্তরটি ভাল। কিন্তু -180 কাজ করেনি।

Answer 11

আপনি বক্স-প্রতিবিম্ব চেষ্টা করতে পারেন

box-reflect: 20px right;

দেখুন সিএসএস সম্পত্তি বক্স প্রতিফলিত সামঞ্জস্য? আরো বিস্তারিত জানার জন্য

Comments

বাক্স-প্রতিবিম্ব শুধুমাত্র ওয়েবকিট সম্পত্তি। তবে আমি মনে করি না এটির একটি

— মোজ

পৃথককারীও হওয়া উচিত :নয়;

— মিঠুনসথীশ

Answer 12

চরিত্রটি কীভাবে ঝাপটানো যায় তার আরও একটি উদাহরণ। আপনার যদি প্রয়োজন হয় তবে বিক্রেতা উপসর্গগুলি যুক্ত করুন তবে এখনকার জন্য সমস্ত আধুনিক ব্রাউজারগুলি অপ্র परिभाषित রূপান্তর সম্পত্তি সমর্থন করে support অপেরা একমাত্র ব্যতিক্রম হ'ল অপেরা মিনি মোড সক্ষম থাকলে (~ 3% বিশ্ব ব্যবহারকারী)।

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

Answer 13

direction: rtl; সম্ভবত আপনি যা খুঁজছেন

Answer 14

এটি 's7 স্ট্রোক আইকন' এবং 'ফন্ট-দুর্দান্ত "এর মতো ফন্ট আইকনগুলির সাথে দুর্দান্ত কাজ করে :

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

এবং তারপরে লক্ষ্য উপাদানটিতে:

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>