代码之家 › 专栏 › 技术社区 › localhost

变换原点以生成完美的X

sass css

localhost · 技术社区 · 5 年前

我在试着做一个完美的“X”关闭按钮( codepen )我认为我的概念或知识 transform-origin 是有限的。我做错什么了?以下是我的代码

HTML

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

SCSS

.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;

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

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

4 回复 | 直到 5 年前

Temani Afif 5 年前

不需要变换原点和其他元素,只需使用一个元素和每行的渐变即可:

.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>

Åukasz BlaszyÅski 5 年前

试试这个。不需要改变变换原点,只需左上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>

ElusiveCoder 5 年前

您可以这样做,请参见下面的代码片段!

.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>

-2

ElusiveCoder 5 年前

请试试这个代码

.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>