css中skew实现元素倾斜

晴空闲云
• 阅读 1311

css中可以用transform可以实现元素2D、3D的一些变化,其中有一个变化倾斜可以用skew实现。

skew语法

skew语法:

skew(ax, ay)

其中:

1. ax 表示在x轴上的倾斜角度,单位为 deg。
2. ay 表示在y轴上的倾斜角度,单位为 deg。

x轴倾斜

示例1,x轴上倾斜30deg:

<!-- 要旋转的div -->
<div class="box"></div>
<!-- 参照物 -->
<div class="box"></div>
<style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        background-color: steelblue;
        margin: 10px 100px;
    }

    .box:nth-of-type(1) {}

    .box:nth-of-type(2) {
        /* x轴上倾斜30deg */
        transform: skew(30deg, 0);
    }
</style>

运行效果:

css中skew实现元素倾斜

红色是辅助线,标明旋转的方向,是沿着x轴倾斜。

y轴倾斜

示例2,y轴上倾斜30deg:

<!-- 要旋转的div -->
<div class="box"></div>
<!-- 参照物 -->
<div class="box"></div>
<style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        background-color: steelblue;
        margin: 50px 100px;
    }

    .box:nth-of-type(1) {}

    .box:nth-of-type(2) {
        /* x轴上倾斜30deg */
        transform: skew(0, 30deg);
    }
</style>

运行效果:

css中skew实现元素倾斜

红色是辅助线,标明旋转的方向,是沿着y轴倾斜。

x和y轴倾斜

示例3,x和y轴各旋转30度。

<!-- 要旋转的div -->
<div class="box"></div>
<!-- x旋转30deg的div -->
<div class="box"></div>
<!-- y旋转30deg的div -->
<div class="box"></div>
<!-- x和y旋转30deg的div -->
<div class="box"></div>
<style type="text/css">
    body {
        padding: 0 35%;
    }

    .box {
        width: 100px;
        height: 100px;
        background-color: steelblue;
        display: inline-block;

        margin: 30px 20px;
    }

    .box:nth-of-type(1) {}

    .box:nth-of-type(2) {
        /* x轴上倾斜30deg */
        transform: skew(30deg, 0);
    }

    .box:nth-of-type(3) {
        /* y轴上倾斜30deg */
        transform: skew(0, 30deg);
    }

    .box:nth-of-type(4) {
        /* x和y轴上倾斜30deg */
        transform: skew(30deg, 30deg);
    }
</style>

运行效果:

css中skew实现元素倾斜

实务应用

上次在知乎上看到一个问题,就是如何画一个圆角的三角形?其实就是用 transform 变换实现的,其中包括了 旋转、倾斜(skew)等。

思路:3个div设置倾斜角度、旋转,设置圆角,然后用before和after伪元素代替2个div。

<!-- 要旋转的div -->
<div class="triangle rounded"></div>
<style type="text/css">
    .triangle {
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: steelblue;
        text-align: left;
    }
    .triangle:before,
    .triangle:after {
        content: '';
        position: absolute;
        background-color: inherit;
    }
    .triangle,
    .triangle:before,
    .triangle:after {
        width: 8em;
        height: 8em;
        border-top-right-radius: 30%;
    }
    .triangle {
            /* 2d 变换 */
        transform: translate(-50%, -50%) rotate(-60deg) skewX(-30deg) scale(1, .866);
    }
    .triangle:before {
            /* 2d 变换 */
        transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
    }
    .triangle:after {
            /* 2d 变换 */
        transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
    }
</style>

运行效果:

css中skew实现元素倾斜

参考链接

如何利用纯css画出一个三个角都是圆角的三角形? https://www.zhihu.com/question/507186160/answer/2281529296

mdn skew: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skew()

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
CSS3里的 转换与过渡动效
一、transform1.12D转换通过CSS3转换,能够对元素进行移动、缩放、转动、拉长或拉伸。1.旋转,deg表示角度。负的为逆时针转动,默认沿着中心点旋转。可以利用transformorigin设置旋转原点。transform:rotate(30deg);!(http
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
2年前
CSS 层叠上下文(Stacking Context)
本文首发于政采云前端团队博客:CSS层叠上下文(StackingContext)https://www.zoo.team/article/cssstackingcontext在网页制作的过程中,元素与元素之间的位置关系,在坐标轴上一般可体现为X轴、Y轴和Z轴。对于X轴和Y轴的定位大多数开发都能比较直观的
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
Unity脚本
1,Transform旋转 transform.Rotate(X,Y,Z);//分别绕X,Y,Z轴旋转,可写为绕某个轴旋转,栗子transform.Rotate(0,90,0); transform.Rotate(Vector3.right\Time.deltaTime);//以欧拉角旋转,顺序是ZXY,right是向X轴
Wesley13 Wesley13
2年前
67,盛最多水的容器
给定 _n_ 个非负整数 _a_1,_a_2,...,_a_n,每个数代表坐标中的一个点 (_i_, _ai_)。在坐标内画 _n_ 条垂直线,垂直线 _i_ 的两个端点分别为 (_i_, _ai_)和(_i_,0)。找出其中的两条线,使得它们与 _x_ 轴共同构成的容器可以容纳最多的水。说明:你不能倾斜容器,且 _n_ 的值至少为2。!
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
晴空闲云
晴空闲云
Lv1
男 · 教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
文章
26
粉丝
7
获赞
35