我想使用 css 伪元素(作为切换指示器)重新创建此图标:
我使用 ::after,::before
创建了必要的伪元素,并尝试使用 transform: rotate(90deg)
旋转它们。
我怎样才能告诉他们围绕自己的中心旋转?我试过 transform-origin: 50% 50%;
但这不起作用。现在,两个伪元素都得到了相同的 right: 10px;
但它们并没有放在彼此之上,而是彼此相邻。
你可以查看这个JS FIDDLE来说明问题。
最佳答案
首先,您可以使用:before
和:after
伪元素并创建这样的形状DEMO
之后,您可以将父元素旋转 45deg
并获得所需的结果。
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
<div class="el"></div>
更新:您还可以像这样在:hover
上添加一些过渡
.el {
margin: 50px;
position: relative;
transform: rotate(45deg);
display: inline-block;
cursor: pointer;
}
.el:before,
.el:after {
content: '';
width: 30px;
height: 30px;
position: absolute;
transition: all 0.3s ease-in;
}
.el:before {
border-top: 4px solid black;
border-left: 4px solid black;
top: -10px;
left: -10px;
}
.el:after {
border-bottom: 4px solid black;
border-right: 4px solid black;
top: 10px;
left: 10px;
}
.el:hover:before {
top: -15px;
left: -15px;
}
.el:hover:after {
top: 15px;
left: 15px;
}
<div class="el"></div>
关于css - 如何旋转伪元素css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38613228/