我有一个简单的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>
这是元素在屏幕上呈现的方式:
答案 0 :(得分:2)
如果您不希望文本受到影响,请添加另一个元素并应用转换的反转: 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);
}