我有一个带有红色背景和文本的简单 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>
这是元素在屏幕上的呈现方式:
最佳答案
如果您不希望文本受到影响，请添加另一个元素并应用反向转换: 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);
}
关于css - 旋转和倾斜 Css3 中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23979657/