旋转减CSS3

Question

如何正确旋转符号“-”？ 例如，当我将sign +设置为旋转时，就可以了，它们停留在原处，只是旋转。 有一个例子

但是如果我更改content: '+'; content: '-'; 我的轴旋转为负，但未固定在原位。 有个例子 。

设置为负，像加号一样旋转是否真实？

Answer 1

使用专门用于数学运算符的MINUS SIGN U + 2212“-”，而不是通常被称为HYPHEN-MINUS U + 002D“-”的常见Ascii连字符，它在语义上含糊不清且在印刷上较差（它必须有效（在某种意义上来说，例如标点符号，连字符，破折号，减号）以及其他一些角色，因此它不能很好地发挥任何特定作用）。 特别是，MINUS SIGN（采用任何体面设计的字体）的宽度与PLUS SIGN相同，并且在垂直位置上与PLUS SIGN的水平笔触相同。 总之，其设计与“ +”相匹配。

在CSS中，您可以编写

 content: '\2212';

另外，您可以使用减号本身：

 content: '−';

但随后您需要注意字符编码。

Answer 2

如果标志-是独立的，你可以这样做： DEMO

line-height:0;/* reduce height to none; */
padding-bottom:0.2em;/* tune gap under font */

如果它在其他内容之中或之外，则添加vertical-align:middle;/* or what suits you best */

---

我相信，这里的inline-block似乎更准确。

Answer 3

您可以使用绝对值在伪元素之前放置：before，然后设置宽度和高度。 这样做默认情况下，变换将应用于中心。

http://jsfiddle.net/sYm3T/

.box {
    width: 200px;
    height: 60px;
    background-color: gray;
    color: #ffffff;
    text-align: center;
    padding-top: 20px;
    position: relative;
    margin-bottom:10px;
}

.box:before {
    font-size: 50px;
    line-height:31px;
    position:absolute;
    content: '-';
    margin-left:-20px;
    margin-top:-20px;
    height:40px;
    width:40px;
    left:50%;
    top:50%;
    -moz-transition: 0.5s all;
    -webkit-transition: 0.5s all;
}

.box.plus:before {
    content: '+';
}
.box.minus:before {
    content: '-';
}

.box:hover::before
{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

另一个解决方案是查看transform-origin属性，以调整发生转换“中心”的位置。