Question

如何正确旋转标志' - '？例如，当我将sign +设置为旋转时，它一切正常，它们保持原位，并且只是旋转。有一个example

但是，如果我将content: '+';更改为content: '-';，我会按轴旋转减去，但不会停留在原位。有example。

设置减号是真的，像加号一样旋转吗？

Answer 1

使用MINUS SIGN U + 2212“ - ”，这是一个特别的数学运算符，而不是常见的Ascii连字符，正式名称为HYPHEN-MINUS U + 002D“ - ”，它在语义上模棱两可，排版较低（它在某种意义上，它必须作为标点连字符，作为一个短划线，一个减号，以及其他一些角色，所以它不能做任何特定的角色。特别是，MINUS SIGN是（任何设计合理的字体），其宽度与PLUS SIGN相同，并且与PLUS SIGN的水平笔划显示在相同的垂直位置。总之，它的设计与“+”匹配。

在CSS中，你可以写

 content: '\2212';

或者，您可以使用MINUS SIGN本身：

 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

你可以使用绝对然后设置宽度和高度来集中你的：在伪元素之前。执行此操作时，默认情况下，变换将应用于中心。

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属性以调整“中心”的位置。发生了转变。

旋转减去CSS3

3 个答案: