html - span 标签的旋转问题

Question

我有以下内联 CSS，但我无法旋转静态位置的箭头。

我需要旋转 HTML 箭头。如何解决？

注意:如果可能，我宁愿不要使用 position: absolute。

<span style="transform: rotate(57deg);">➤</span>

Answer 1

参见 the spec :

Applies to: transformable elements

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, patternTransform or gradientTransform [SVG11].

您使用的不是 SVG 的跨度，因此第二个不适用。

默认情况下，跨度是 display: inline，因此它也不匹配任何第一类选项。

将 display 属性设置为可接受的值之一。

body { margin-top: 70px; }

<span style="transform: rotate(57deg); display: block; width: 20px; outline: solid red 1px;">➤</span>