Transform origin to make a perfect X

问题: I am trying to make a perfect "X" for close button (codepen). I think my concept or knowledge of transform-origin is limited. What am I doing wrong? Following is my code...

问题:

I am trying to make a perfect "X" for close button (codepen). I think my concept or knowledge of transform-origin is limited. What am I doing wrong? Following is my code

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

回答1:

No need transform-origin and extra element, you can simply do it with one element and a gradient for each line:

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


回答2:

Try this. There is no need to change tranform origin, just make absolute elemnt cenetre with left and top 50% and translate(-50%, -50%) and then just rotate it.

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

回答3:

You can do it like this, see below snippet!

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


回答4:

pls try this code

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

  • 发表于 2019-01-08 09:49
  • 阅读 ( 213 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除