tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

css3实现边框旋转但内容不动

9154人阅读 2020/8/12 15:30 总访问:2063084 评论:0 收藏:0 手机
分类: 前端

其实思路就是把文字旋转的角度反向旋转抵消掉div旋转的角度即可

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. .container{
  8. margin: 50px;
  9. width: 100px;
  10. height: 100px;
  11. text-align: center;
  12. border: 1px solid #000;
  13. transform: rotate(45deg);
  14. transform-origin:center 50%;
  15. }
  16. .txt{
  17. display: inline-block;
  18. line-height: 100px;
  19. transform: rotate(-45deg);
  20. transform-origin:center 50%;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="container">
  26. <span class="txt">文字</span>
  27. </div>
  28. </body>
  29. </html>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

css3样式学习代码

上代码!上代码!不说了&lt;!DOCTYPEhtml&gt; &lt;htmllang=&quot;en&quot;&gt; &lt;head&gt; &lt;metacharset=&quot;UT...

HTML+css3+js 实现生日快乐代码,动态生成效果

&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;title&gt;生日快乐&lt;/...

css3过渡渐变

code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;utf-8&quot;&gt; &lt;title&gt;菜鸟教程...

css3 background-size

语法:div { background:url(img_flwr.gif); background-size:80px60px; background-repeat:no-repeat; }可以设置成10...

css3印章效果

配合bootstrap4来写的,效果图直接贴代码吧:直接复制运行即可看到效果:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&g...

css3 中的 nth-child

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以...

css3伪类选择器 nth-child , 循环变色,循环颜色。css最后一个元素

选中第一个元素:.container&gt;div:first-child{ background:#abcdff; }选中最后一个可以使用last-child.container&gt;d...

css3 伪类选择器 before和after。实现简单的标题。清楚浮动。红黄蓝效果。实现下方横线((下划线 ,下横线)),Tab菜单效果

[TOC]伪类选择器before和after,实现一个简单的标题效果 代码如下 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;...

css3 实现ps文字外发光效果实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮

CSS3 并没有直接设置发光效果的属性,但是利用text-shadow属性实现此效果text-shadow: h-shadow v-shadow blur color; 参...

使用css3实现一个不规则div的布局

要实现不规则的div布局,可以使用CSS3的clip-path属性。该属性可以剪切元素的形状,从而实现不规则的布局。以下是一个示例...

css3 渐变 两边浅中间深。由中间向两边。 div边框渐变色

设计图是这样的 可以使用线性渐变语法:background: linear-gradient(direction, color-stop1, color-stop2, …)例如从...