微信小程序界面设计小程序中CSS3样式精通课程-2D转化-skew()倾斜元素

Love The Way You Lie 2024-02-19 16:18 11阅读 0赞

### 2D转化-skew()倾斜元素 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
通用语法  
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数  
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:yellow;
    border:1px solid black;
    }
    div#div2
    {
    transform:skew(30deg,20deg);
    -ms-transform:skew(30deg,20deg); /* IE 9 */
    -moz-transform:skew(30deg,20deg); /* Firefox */
    -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
    -o-transform:skew(30deg,20deg); /* Opera */
    }
    </style>
    </head>
    <body>
    
    <div>你好。这是一个 div 元素。</div>
    
    <div id="div2">你好。这是一个 div 元素。</div>
    
    </body>
    </html>

效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-2D转化-skew()倾斜元素][CSS3_-2D_-skew]

### 小程序应用 ###

> Wxml代码

> Wxss代码

Wxss代码
    .c01{
    	width:100px;
    	height:150px;
      margin: 50px;
      background-color: gainsboro;
    }
    
    .c02{
    	width:100px;
    	height:150px;
      margin: 50px;
      background-color: gainsboro;
      transform:skew(30deg,0);
    }

防采集标记：黄菊华老师的课程和资料  
效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-2D转化-skew()倾斜元素][CSS3_-2D_-skew 1]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]

![微信小程序界面设计小程序中CSS3样式精通课程-2D转化-skew()倾斜元素][CSS3_-2D_-skew 2]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[CSS3_-2D_-skew]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/34c1c662e9d74c5f9ba8ad2cefaa75b8.png
[CSS3_-2D_-skew 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2567b7c83036430285f944ace6723e54.png
[-_CSS3]: https://ke.qq.com/course/371155?tuin=2b10d56
[CSS3_-2D_-skew 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/10dda81ff6204bf296dd341f9cac3a1a.png