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

最新推荐文章于 2024-03-27 18:12:03 发布

黄菊华老师

最新推荐文章于 2024-03-27 18:12:03 发布

阅读量776

点赞数

分类专栏：视频教程微信小程序-样式-wxss-css 文章标签：微信小程序界面设计小程序中CSS3样式精通课程-2D转化-skew() 2D转化-skew()倾斜元素

本文链接：https://blog.csdn.net/u013818205/article/details/86596432

版权

视频教程同时被 2 个专栏收录

184 篇文章 2 订阅

订阅专栏

微信小程序-样式-wxss-css

101 篇文章 4 订阅

订阅专栏

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

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：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()倾斜元素

小程序应用

Wxml代码

<view class='c01'>
01
</view>

<view class='c02'>
02
</view>

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()倾斜元素