如何正确设置 transform-origin 以创建完美的 X 符号？

Question

我正在尝试为关闭按钮 (codepen) 制作一个完美的 "X"。我认为我对 transform-origin 的概念或知识是有限的。我究竟做错了什么？以下是我的代码

.circle {
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 50%;
  position: absolute;
}

span {
  display: block;
  width: 100%;
  height: 5px;
  background: white;
  border-radius: 20%;
  margin-top: 5px;
  position: absolute;
}

span:first-child {
  transform: rotate(45deg);
  transform-origin: center left;
  top: 0%;
  left: 20%;
}

span:last-child {
  transform: rotate(-45deg);
  transform-origin: bottom right;
}

<div class="circle">
  <span></span>
  <span></span>
</div>

Answer 1

试试这个。无需更改变换原点，只需将元素绝对中心设置为 left 和 top 50% 并平移(-50%, -50%) 然后旋转即可。

.circle{
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 50%;
  position: absolute;
}    
span{
        display: block;
        width: 100%;
        height: 5px;
        background: white;
        border-radius: 20%;
        margin-top:5px;
        position: absolute;
        margin: 0 auto;
        top: 50%;
        left: 50%;
        &:first-child{
            transform: translate(-50%, -50%) rotate(45deg);

        }
        &:last-child{
             transform: translate(-50%, -50%) rotate(-45deg);   
        }
    }

<div class="circle">
  <span></span>
  <span></span>
</div>

Answer 2

您可以这样做，请参阅下面的代码片段！

.circle{
    width: 100px;
    height: 100px;
    background: black;
    border-radius: 50%;
    position: absolute;
}    
span{
    display: block;
    width: 100%;
    height: 5px;
    background: white;
    border-radius: 20%;
    margin-top:5px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.circle span:first-child{
    transform: rotateZ(45deg);
}
.circle span:last-child{
    transform: rotateZ(-45deg);
}

<div class="circle">
  <span></span>
  <span></span>
</div>

Answer 3

不需要transform-origin和额外的元素，你可以简单地用一个元素和每行的渐变来完成：

.circle {
  width:50px;
  height:50px;
  border-radius:50%;
  background:
    /*horizontal line centred [width=100% and height=5px]*/
    linear-gradient(#fff,#fff) center/100% 5px,
    /*Vertical line centred [width=5px and height=100%]*/
    linear-gradient(#fff,#fff) center/5px 100%, 
    /*black background color*/
    #000;
  background-repeat:no-repeat;
  transform:rotate(45deg);
}

<div class="circle">
</div>

这是一个透明的版本：

.circle {
  width:50px;
  height:50px;
  border-radius:50%;
  background:
    linear-gradient(#000,#000) top    left,
    linear-gradient(#000,#000) top    right,
    linear-gradient(#000,#000) bottom left,
    linear-gradient(#000,#000) bottom right;
  background-size:calc(50% - 3px) calc(50% - 3px);
  background-repeat:no-repeat;
  transform:rotate(45deg);
}

body {
  background:pink;
}

<div class="circle">
</div>

Answer 4

请试试这个代码

.circle {
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 50%;
  position: absolute;
}

span {
  display: block;
  width: 100%;
  height: 5px;
  background: white;
  border-radius: 20%;
  margin-top: 5px;
  position: absolute;
  margin: 0 auto;
}
span:first-child {
  transform: rotate(45deg);
  transform-origin: center center;
  top: 50%;
}
span:last-child {
  transform: rotate(-45deg);
  transform-origin: center;
  top: 50%;
}

<html>

<head><script src="//static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js"></script><script src="//static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js"></script><meta charset="UTF-8"><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico"><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111"><link rel="canonical" href="https://codepen.io/codearts/pen/vvdGoJ">


</head>

<body>
    <div class="circle">
  <span></span>
  <span></span>
</div>
</body>
</html>

如何正确设置 transform-origin 以创建完美的 X 符号？

How to correctly set transform-origin to create a perfect X symbol?

css

css-shapes