在Css3中旋转和倾斜图元_Css_Transform

在Css3中旋转和倾斜图元

css

在Css3中旋转和倾斜图元,css,transform,Css,Transform,我有一个简单的div元素，上面有红色背景和文本。我希望这个元素有旋转和倾斜。代码的结果是文本被旋转，而不是整个div元素。我怎样才能解决这个问题 <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title></title> <style> #CssElement {

我有一个简单的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>


#C选择{
位置：绝对位置；
顶部：250px；
左：250px；
宽度：200px；
高度：200px；
背景色：红色；
-webkit变换：倾斜（-15度，-30度）旋转（180度）；
字体大小：40px；
}
看我是怎么画的

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

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

您的问题描述似乎表明文本在元素内旋转，但元素本身不旋转（如果您使用

边框颜色

来设置特定边框的样式，您将看到情况并非如此：）。我误解你的问题了吗？（另外，您可能发布了错误的图片/代码，因为您显示的图片应该是

旋转（90度）

，而代码显示的是

旋转（180度）

）

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

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