|HTML 2d转换之旋转效果代码

文章图片

文章图片

文章图片

上节课我们已经讲了关于HTML中2d转换中移动的相关知识了，这节课我们继续学习HTML中2d转换中旋转的语法以及相关案例。
1.HTML中2d转换之旋转实现的效果：在二维平面上进行顺时针或者逆时针的旋转。
语法格式：transform: rotate(旋转的角度)
需要注意的问题：单位是deg.数值为正代表着顺时针的旋转，数值为负代表着逆时针旋转。
举例：设置一个高宽均为200像素的盒子，顺时针旋转45度

2.2d转换之旋转实战如下图，我们想要利用旋转完成下图效果，主要分为以下几步：

第一步，首先设置外面的长框。我们设置一个宽度200像素和高度为30像素的div并添加边框。

第二步，我们利用伪元素选择器，在div后添加一个高度和宽度均为10像素的盒子，并设置右下边框显示：

第三步，我们讲伪元素选择器顺时针旋转45度：

第四步，我们调整伪元素的位置。通过相对定位和绝对定位进行位置的调整。
【|HTML 2d转换之旋转效果代码】