css实现文字翻转效果

csss实现文字翻转效果

主要实现核心属性

direction: rtl;

unicode-bidi: bidi-override;


  1. direction: rtl;
  • 这个属性用于指定文本的方向为从右到左(Right-to-Left)。
  • 它常用于处理阿拉伯语、希伯来语等从右向左书写的文字样式。
  • 当设置了 direction: rtl; 时,文本将从右向左排列,并且与左对齐的元素会靠右对齐。
  1. unicode-bidi: bidi-override;
  • 这个属性被用于覆盖元素内部的文本方向属性。
  • 它通常与 direction: rtl; 一起使用,用于确保在具有混合文本方向的情况下,正确地渲染文本。
  • 通过设置 unicode-bidi: bidi-override;,可以强制元素内的文本按照上级父元素的文本方向进行显示。

需要注意的是,这些属性可能会在不同浏览器中有不同的表现,因此在使用时应该仔细测试和兼容性考虑。

html结构

html 复制代码
    <div class="top">
      <div class="title">
        <div class="en">login</div>
        <div class="shad">login</div>
      </div>
      <div class="logo"></div>
    </div>

less----css拆分一下就行

css 复制代码
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .title {
      color: #fff;
      height: 50px;
      font-size: 30px;

      .shad {
        text-transform: uppercase;
        translate: 0 -36px;
      }

      .en {
        color: #ccc;
        opacity: .5;
        text-transform: uppercase;
        transform: rotate(180deg) skew(-20deg);
        translate: -5px 28px;
        direction: rtl;
        unicode-bidi: bidi-override;
      }
    }

    .logo {
      width: 50px;
      height: 50px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

效果图:


相关推荐
herogus丶8 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder11 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者14 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder14 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder15 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806929 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js