css3 skew坐标轴笔记
transform是css3中对于性能来说是比较安全的
在二维空间里面,skew有两个属性值:skewX,skewY,图形的变化也就是针对这两个值来操作;
transform: skewX(45deg);
可以看到demo标签向左倾斜45度产生的形变,那么为什么会产生这个形变呢?
因为demo的高度是不变的,只要倾斜角度不是180的倍数,demo的高度始终保持原有的高度,所以只能拉长本身,产生形变;(围绕X轴倾斜,保持高度不变,围绕Y轴,保持宽度不变)
为什么说不是180的倍数呢?原因很简单,如果是180的倍数,demo元素将不可见。
transform: skew(45deg,45deg);
注意:两张图片的围绕中心点不同,这个默认值是图一
css3 skew坐标轴笔记的更多相关文章
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- CSS3 Animation学习笔记
Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...
- css3 transform(变形)笔记
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...
- css3动画相关笔记
1.$(".aa").delay(2500).animate({width:0}); // 延迟 2.setTimeout(function(){ --> css3 anim ...
- css3动画学习笔记
具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...
- css3 和 html5 笔记
1.css3 ie下大部分不兼容 ie9以下 浏览器低版本不兼容 需要写 -webket-transition:1s -moz-transition: 1s -o-transition:1s tran ...
- HTML5与CSS3新增特性笔记
HTML5 HTML5和HTML事件 注意:行内代码的为H5新增事件 Window事件属性: 针对 window 对象触发的事件(应用到 标签) onafterprint 文档打印之后运行的脚本 on ...
- CSS3新技能学习笔记
说来惭愧自认为对css了解,但在项目中却很少有正确的使用css,如果面向对象的css吧,其实也不是不想用而是css天生就是面向对象的,高度可重用,但是如果把每个都单独提取,难免会有过多的class以及 ...
- 《The Book of CSS3》学习笔记
一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ ...
随机推荐
- ELF文件格式与进程地址空间的联系
http://blog.csdn.net/q_l_s/article/details/52597330 三.分析在fork产生新进程中ELF文件格式与进程地址空间的联系 1.进程的虚拟地址空间 每个程 ...
- node.js 练习2 (调用函数)
1. 调用本地 函数 (1) 创建 n2-1.js ,并输入代码 (2) 运行localhhost:8000 (3)在浏览器中 查看 (4)在cmd中查看 2.调用外部 函数 (1) 创建n2-2. ...
- c/c++基础
如果有你认为重要的知识点,而我这却没有记录下来的,那么期待你分享给我(^U^)ノ~YO. 1.在结构体中,符号->的前面是指针变量,符号.的前面是普通变量. 程序中a->b等价于(*a ...
- 前端css样式及选择器
标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式) 推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...
- Windosw系统——常见的问题
1. 写在某些软件后就无法打开网页,但可以上QQ. 在卸载了一些VPN或USB无线设备后,发现自己网页打不开,但是ping能ping通,也可以登录QQ. 解决办法: (1): 开始运行——regedi ...
- java.lang.UnsupportedOperationException: Exception occurred during processing request: null
1.Action有问题,Struts2注解拼写错误,注解包版本不匹配! 2.今天还有一个错误,Tomcat服务器异常,无法启动,Remove/clean后还是无法启动 :极大可能是web.xml 写错 ...
- JS提示Cannot read property 'replace' of undefined
出现这个错误的原因一般是传的参数为null 在传参之前加个是否为null的判断就行了.
- Intellij IDEA 查找接口实现类的快捷键
查找接口的实现类: IDEA 风格 ctrl + alt +B 查看类或接口的继承关系: ctrl + h 1.IDEA_查找接口的实现 的快捷键 http://blog.csdn.net/u0100 ...
- 46个Linux面试常见问题
问题一: 绝对路径用什么符号表示?当前目录.上层目录用什么表示?主目录用什么表示? 切换目录用什么命令? 答案:绝对路径: 如/etc/init.d当前目录和上层目录: ./ ../主目录: ~/切 ...
- LeetCode977. 有序数组的平方
问题:977. 有序数组的平方 给定一个按非递减顺序排序的整数数组 A,返回每个数字的平方组成的新数组,要求也按非递减顺序排序. 示例 1: 输入:[-4,-1,0,3,10] 输出:[0,1,9,1 ...