CSS3 创意:页面元素旋转

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元免费积分!

讨论 关于将 **旋转** 作为 CSS3 的一部分。 以下是一些重要要点

旋转有两种类型:布局期间发生的旋转(并将内容推到其下方),以及布局后发生的旋转。

width: auto 在旋转元素上表示使用旋转前的可用宽度。

width: max-intrinsic; rotate: rotate-to-fit-keyword 使我们能够围绕文本收缩以找到其宽度,并选择使该块适合的最小角度。

width: shrinkwrap 在旋转后使用可用空间,从一行开始,随着更多内容的输入,使块更高更窄,直到它达到其最小内容宽度(或最小宽度)。

image-orientation 接受所有角度,四舍五入到最接近的 90° 增量,规范指出作者 **不应** 指定除 90° 增量以外的角度。

我认为旋转绝对应该成为 CSS 规范的一部分。 我们应该拥有这种设计控制,而无需牺牲可用性。

css3possibilities.gif