图形解析理解 css3 之倾斜属性skew()
1、作用
改变元素在页面中的形状
2、语法
属性：transform
函数：
1、skew(xdeg)
向横向倾斜指定度数
x取值为正，X轴不动，y轴逆时针倾斜一定角度
x取值为负，X轴不动，y轴顺时针倾斜一定角度
skew(30deg)
2、skew(xdeg,ydeg)
ydeg : 纵向倾斜度数
y取值为正，y轴不动,x轴顺时针倾斜一定角度
y取值为负，y轴不动,x轴逆时针倾斜一定角度
3、skewX(xdeg)
4、skewY(ydeg)
3.应用和理解
<!doctype html>
<html lang="zh-cn">
<head>
<title>Insert a title</title>
<meta charset="utf-8">
<style>
#d1,#d2{
width:200px;
height:200px;
position:absolute;
left:400px;
top:200px;
}
#d1{
background-color:#ddd;
border:1px solid #333; }
#d2{
background-color:pink;
border:1px solid orange;
opacity:0.5;
transform:skew(45deg);
}
</style>
</head>
<body>
<div id="d1">参考元素</div>
<div id="d2">转换元素</div>
</body>
</html>
效果图：
效果图解析：
图形解析理解 css3 之倾斜属性skew()的更多相关文章
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 如何理解 css3 的 perspective 属性
一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位 ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...
- 理解CSS3 transform中的Matrix(矩阵)——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...
- CSS3动画相关属性详解
本文转载于:<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfo ...
- 理解CSS3属性transition
一.说明 1.1 定义和用法 transition 属性是一个简写属性,用于设置四个过渡属性: transition-property:规定设置过渡效果的CSS属性的名称. transition-du ...
- css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
随机推荐
- html和css入门 （三）
文本样式 color 文本颜色 属性名 color 属性值 预定义的颜色名 | 十六进制值的颜色值 | RGB颜色值 默认值 依赖用户代理 描述 设置文本的颜色 direction 文本方向( 属性名 ...
- react+javascript前端进阶
组合1: react技术栈(react(阮一峰react入门,官网教程).redux(阮一峰redux入门,官网教程).saga)+JS(ES6)+antd+you don`t know JS(上中下 ...
- set(string str)变量传参为int的问题
if (bo.getAnesthesiaMode() != null) { if (bo.getAnesthesiaMode() != null) { CodeMstrCoMpare codeMstr ...
- Creator4.2建模心得与技巧1——树的建立与跟随摄像机旋转
Creator建模: 树一般在虚拟现实程序中都用面来实现,一种方法是通过两个面相互垂直成90度叠放在一起,另一种方法是让树面正对着视角一起旋转.这里主要说一下第二种方法. 主要思路:把树面一直正对着摄 ...
- 数组sort()方法排序
sort()方法排序 var arr = ["G","A","C","B","I","H& ...
- sql优化1
1.mysql里面的索引 对于 like关键字匹配查询,适用于like name%,但是不适用于%name%;添加索引时候注意这点 2.mysql的limit分页 ,limit 2,5;表示每页显示5 ...
- 使用pdb调试python脚本
pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能,主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变量的值等.pdb 提供了 ...
- centOS 7 简单设置（虚拟机）
1.修改主机名 hostnamectl set-hostname 2.ssh连接慢的问题解决 vim /etc/ssh/sshd_config UseDNS=no GSSAPIAuthenticati ...
- 线程 Z
原文:http://www.albahari.com/threading/part5.aspx 专题:C#中的多线程 1并行编程Permalink 在这一部分,我们讨论 Framework 4.0 加 ...
- .net 面向对象程序设计深入]（3）UML
1.活动图简介 定义:是阐明了业务用例实现的工作流程. 业务工作流程说明了业务为向所服务的业务主角提供其所需的价值而必须完成的工作. 业务用例由一系列活动组成,它们共同为业务主角生成某些工件. 工作流 ...