需求
开发的时候遇到需要将背景图片旋转-45度。这样的效果。
UI给的图片是正的。
方法
第一想到的是通过设置css3样式的transform: rotate(-45deg)。
问题
但是发现内容也跟着旋转了。
解决
所以把背景图放到伪类中进行旋转就可以完美解决这个问题了
.bgimg1{ position: relative; } .bgimg1::after { content: ""; position: absolute; right: 30px; top: 0; width: 108px; height: 108px; display: block; background-size: 108px 108px; background-repeat: no-repeat; background-position: right top; background-image: url('./images/state1.png'); transform: rotate(-45deg); opacity: 0.8; }
扩展
- transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
| 值 | 描述 |
| none | 定义不进行转换。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
- CSS伪类是用来添加一些选择器的特殊效果。
| 伪类/伪元素 | 描述 |
| :hover | 选择鼠标指针浮动在其上的元素 |
| :active | 选择被用户激活的元素，例如点击按钮 |
| :link | 选择所有未被访问的链接 |
| :visited | 选择所有已被访问的链接 |
| :first-child | 选择其父元素的第一个子元素 |
| :last-child | 选择其父元素的最后一个子元素 |
| :nth-child(n) | 选择其父元素的第n个子元素 |
| :nth-last-child(n) | 选择其父元素的倒数第n个子元素 |
| :only-child | 选择其父元素仅有的子元素 |
| :only-of-type | 选择其父元素同类型子元素中仅有的一个 |
| :empty | 选择没有子元素的元素 |
| :not(selector) | 选择不符合给定选择器的元素 |
| :nth-of-type(n) | 选择同类型子元素中的第n个元素 |
| :nth-last-of-type(n) | 选择同类型子元素中的倒数第n个元素 |
| :first-of-type | 选择同类型子元素中的第一个元素 |
| :last-of-type | 选择同类型子元素中的最后一个元素 |
| :lang(language) | 选择带有指定语言的元素 |
| :focus | 选择获得焦点的元素 |
| :target | 选择当前活动的目标元素 |
| :enabled | 选择启用的元素 |
| :disabled | 选择禁用的元素 |
| :checked | 选择被选中的元素（如单选按钮或复选框） |
| :not(selector) | 否定选择器，返回与给定选择器不匹配的元素 |
| :root | 选择文档的根元素 |
| :nth-root(n) | 选择根元素的第n个子元素 |
