PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > CSS实现旋转90°展示

CSS实现旋转90°展示

樂成的开发笔记
樂成的开发笔记 原创
2019年07月09日 16:56:45 2064浏览

1、预约点餐系统,客户需要展示大厅的平面图,所以只能横屏展示了,所以用了css让字体横着过来,看图
企业微信截图_15626614352528.png
2、源码示例

<!-- html -->
<span class="seat-span"><b>A18</b></span>

/* css 旋转90° */
b{
display: inline-block; /* block */
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* Internet Explorer */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
}


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
kanglecheng2019-07-09 17:17:49 1楼
找了一下W3C的文档:CSS3 transform 属性 http://www.w3school.com.cn/cssref/pr_transform.asp