सीएसएस एक छद्म घुमाएँ: सामग्री से पहले या बाद में: ""

Question

वैसे भी छद्म पर एक रोटेशन काम करने के लिए

content:"\24B6"? 

मैं एक यूनिकोड प्रतीक को घुमाने की कोशिश कर रहा हूं।

Comments

क्या आप एक बार (30deg) छद्म तत्व को घुमाने की कोशिश कर रहे हैं, या इसे अनैतिक रूप से घुमाना चाहते हैं? निर्दिष्ट नहीं किया।

— RealMJDev

Answer 1

इनलाइन तत्वों को रूपांतरित नहीं किया जा सकता है, और छद्म तत्व डिफ़ॉल्ट रूप से इनलाइन होते हैं, इसलिए आपको उन्हें लागू करना display: blockया display: inline-blockबदलना होगा:

#whatever:after {
  content:"\24B6";
  display: inline-block;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

<div id="whatever">Some text </div>

Answer 2

.process-list:after{
    content: "\2191";
    position: absolute;
    top:50%;
    right:-8px;
    background-color: #ea1f41;
    width:35px;
    height: 35px;
    border:2px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    z-index: 10000;
    -webkit-transform: rotate(50deg) translateY(-50%);
    -moz-transform: rotate(50deg) translateY(-50%);
    -ms-transform: rotate(50deg) translateY(-50%);
    -o-transform: rotate(50deg) translateY(-50%);
    transform: rotate(50deg) translateY(-50%);
}

आप इस कोड को देख सकते हैं। मुझे उम्मीद है कि आप आसानी से समझ जाएंगे।

Comments

वास्तव में मुझे आसानी से समझ में नहीं आता है :) एक उपयोगी उत्तर यह बताता है कि कोड क्या करता है, और यह स्वीकृत उत्तर से कैसे अलग है। यह स्वीकार किए गए उत्तर की तरह एक रनिंग स्निपेट भी होगा।

— डैन डस्केलस्क्यू