css 中心点旋转90度 |css模块化库

css地图菜单，css 宽度子元素，css文字对齐冒号，figma导出css动画样式，css资源加载跨域限制，css 背景图片中间，css模块化库 css 中心点旋转90度 |css模块化库

.box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
/* 确定旋转中心 */
transform-origin: center center;
/* 旋转 90 度 */
transform: rotate(90deg);
}

首先，大家需要创建一个包含旋转元素的容器，这里大家使用一个 class 为 box 的 div 元素作为容器。大家先给这个元素设定宽度和高度，并设置背景色为红色。然后，大家将容器元素的 margin 属性设为“50px auto”，实现水平居中。接下来，大家需要确定旋转中心，大家使用 transform-origin 属性，将其设为“center center”，即居中对称。最后，大家通过 transform 属性将元素旋转 90 度。

当然，大家也可以使用轻量级的 CSS 库来轻松实现元素旋转。例如，Animate.css 库中的 rotateInDownRight 类就可以实现从右下角旋转进入的动画效果：

<!-- 引入 Animate.css 库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<div class="animate__animated animate__rotateInDownRight">Hello, World!</div>

在上面的例子中，大家使用了 Animate.css 库，并将 div 元素的 class 属性设为“animate__animated animate__rotateInDownRight”，即可实现从右下角旋转进入的动画效果。

无论是手写 CSS 还是使用 CSS 库，掌握 CSS 中心点旋转 90 度技巧可以让大家更加灵活地处理元素样式，达到更好的呈现效果。