The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.

The following code skews the paragraph element by -32 degrees along the X-axis.

p {
transform: skewX(-32deg);
}

练习题目:

Skew the element with the id of bottom by 24 degrees along the X-axis by using the transform property.

练习代码:

 <style>
div {
width: %;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
</style> <div id="top"></div>
<div id="bottom"></div>

效果:

  • 蓝色的和红色一样的
  • 通过skewX,让蓝色的上下边不动,左右在水平方向(延X轴)倾斜了24度。上下不动,左右移动

  • 经测试,skewY,让蓝色的左右两边,延垂直方向(Y轴)倾斜。左右不动,上下移动。如下图:

FCC---Use the CSS Transform Property skewX to Skew an Element Along the X-Axis的更多相关文章

  1. FCC---Use the CSS Transform scale Property to Scale an Element on Hover

    The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your ...

  2. FCC---Use the CSS Transform scale Property to Change the Size of an Element

    To change the scale of an element, CSS has the transform property, along with its scale() function. ...

  3. CSS Transform完全指南 #flight.Archives007

    Title/ CSS Transform完全指南 #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...

  4. CSS Transform完全指南(第二版) #flight.Archives007

    Title/ CSS Transform完全指南(第二版) #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: ...

  5. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  6. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  7. Html CSS transform matrix3d 3D转场特效

    Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...

  8. css: transform导致文字显示模糊

    css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...

  9. select2取值报错,Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

    用到了 select2 组件来多选收件人,用搜狗浏览器(6.2版高速模式)在执行到如下这句时报错(Uncaught InvalidStateError: Failed to read the 'sel ...

随机推荐

  1. [UIApplication sharedApplication].keyWindow和[[UIApplication sharedApplication].delegate window]区别

    参考链接:https://www.cnblogs.com/henusyj-1314/p/11643189.html 结论1.在获取到window时最好使用[[UIApplication sharedA ...

  2. Cookie与Session会话技术

    Cookie与Session会话技术 一.什么是会话 会话:当用户打开浏览器,访问多个WEB资源,然后关闭浏览器的过程,称之为一个会话,选项卡,弹出页面都属于这个会话,且共享同一个session. 二 ...

  3. android:Program type already present: android.support.v4.app.INotificationSideChannel

    背景 这个错误的原因是:androidx和 android.support同时存在. 首先,网上有很多解答说这样处理: 在 gradle.properties 添加: android.useAndro ...

  4. Power BI 概念及 国内版Pro 试用账户注册流程

    视频内容: Power BI 基本概念:https://v.qq.com/x/page/s3026nn69eu.html Power BI Pro 世纪互联版本试用账号注册:https://v.qq. ...

  5. JAVA集合框架(三)-Map

    前言 Map是java中用于存储键值对映射的接口.是解决编程问题最常用的数据结构之一.在工作中,有时候为实现一个功能可能写了好大一段代码,运行是ok了,但是就是不想回头再看,不敢相信自己写的这么烂.这 ...

  6. 计算几何 val.1

    目录 计算几何 val.1 向量的点积 向量的叉积 一种奇怪的三角剖分求面积 凸包 点绕点旋转 后记 计算几何 val.1 本文并不是入门文章,供有高中数学基础的阅读 主要写一些重要的点和注意事项吧 ...

  7. .Net Core组件化视图(部分视图)

    .Net Core组件化视图(部分视图) 1.背景 1.以前我们使用.Net的时候使用部分视图的方式在,.Net Core 中能在单独处理逻辑的部分视图没有了,但是我们还是想使用现在的.Net Cor ...

  8. C# net core程序调试错误集(持续更新)

    目录 C#程序调试错误集 1.依赖注入错误System.InvalidOperationException: Unable to resolve service for type 'xxx' whil ...

  9. Git实战指南----跟着haibiscuit学Git(第三篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...

  10. 系统架构师考试知识点mp3资料免费下载

    场景 系统架构设计师考试,属于全国计算机技术与软件专业技术资格考试(简称计算机软件资格考试)中的一个高级考试. 系统架构设计师考试,考试不设学历与资历条件,不论年龄和专业,考生可根据自己的技术水平,选 ...