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

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

文章图片

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

文章图片

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

文章图片


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

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

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

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

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

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