运用CSS伪类与属性，巧妙实现背景图片旋转效果

需求

开发的时候遇到需要将背景图片旋转-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个子元素