Question

我有一个简单的div元素，上面有红色背景和文字。我希望这个元素有一个旋转和一个倾斜。作为我的代码的结果发生的是文本被旋转，而不是整个div元素。我该如何解决这个问题？

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #CssElement {
            position:absolute;
            top:250px;
            left:250px;
            width:200px;
            height:200px;
            background-color:red;
            -webkit-transform:skew(-15deg,-30deg)  rotate(180deg);         
            font-size:40px;
        }
    </style>
</head>
<body>
<div id="CssElement">Look how I am drawn</div>
</body>
</html>

这是元素在屏幕上呈现的方式：

Good skew but bad rotation

Answer 1

如果您不希望文本受到影响，请添加另一个元素并应用转换的反转： fiddle

<div id="CssElement"><span>Look how I am drawn</span></div>

CSS：

#CssElement span {
    display: inline-block;
   -webkit-transform: rotate(180deg) skew(15deg, 30deg);
    transform: rotate(180deg) skew(15deg, 30deg);
}

在Css3中旋转和倾斜元素

1 个答案: