Question

我正在尝试使用transform和rotate装载skew的结构，但内部的所有文字都会变形，check the demo here

.inclined .content{ 
    -moz-transform: rotate(-15deg) skewX(-15deg);
    -webkit-transform: rotate(-15deg) skewX(-15deg);
    -o-transform: rotate(-15deg) skewX(-15deg);
    -ms-transform: rotate(-15deg) skewX(-15deg);
    transform: rotate(-15deg) skewX(-15deg);
}

.inclined{
    -moz-transform: rotate(15deg) skewX(15deg);
    -webkit-transform: rotate(15deg) skewX(15deg);
    -o-transform: rotate(15deg) skewX(15deg);
    -ms-transform: rotate(15deg) skewX(15deg);
    transform: rotate(15deg) skewX(15deg);
    background: #515151;
    padding: 20px;
    text-align: center;
    color: #fff;
    margin-top: 115px;
}

有什么方法可以解决这个问题吗？

Answer 1

要获得逆变换，您需要更改符号和各个变换的顺序

.inclined .content{ 
    -moz-transform: skewX(-15deg) rotate(-15deg) ;
    -webkit-transform:  skewX(-15deg) rotate(-15deg);
    -o-transform:  skewX(-15deg) rotate(-15deg);
    -ms-transform:  skewX(-15deg) rotate(-15deg);
    transform: skewX(-15deg) rotate(-15deg) ;
}
.inclined{
    -moz-transform: rotate(15deg) skewX(15deg);
    -webkit-transform: rotate(15deg) skewX(15deg);
    -o-transform: rotate(15deg) skewX(15deg);
    -ms-transform: rotate(15deg) skewX(15deg);
    transform: rotate(15deg) skewX(15deg);
    background: #515151;
    padding: 20px;
    text-align: center;
    color: #fff;
    margin-top: 115px;
}

fiddle

旋转和倾斜变形文本

1 个答案: