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 */ ...
随机推荐
- POJ-3067 Japan---树状数组逆序对变形
题目链接: https://vjudge.net/problem/POJ-3067 题目大意: 日本岛东海岸与西海岸分别有N和M个城市,现在修高速公路连接东西海岸的城市,求交点个数. 解题思路: 记每 ...
- 定位webpack文件大小
之前发现一个神器,记录一下,可以可视化webpack打包的每个js文件大小,这样对我们优化代码是有帮助的,有目标的 https://www.npmjs.com/package/webpack-bund ...
- this指针和类的继承
神秘的家伙 在对象的世界里,有一个特殊的指针,它叫做this.我们从来没有见过他,但是他却从来都存在.我们通过一个典型的例子来认识它: class Human { char fishc; Human( ...
- C语言中%p,%u,%lu都有什么用处
%p表示输出这个指针, %d表示后面的输出类型为有符号的10进制整形, %u表示无符号10进制整型, %lu表示输出无符号长整型整数 (long unsigned)
- Matlab将矩阵保存为图像
imwrite(image,'image.jpg'); image为矩阵的内容 image.jpg为要保存的图像的名字
- RDVTabBarController--可自由定制的iOS底部导航控件
RDVTabBarController:一个十分完善的tabBarController,可以自定义角标个数,爽的停不下来. RDVTabBarController地址:RDVTabBarControl ...
- PHP:(一)安装并使用PHP
php的安装分为两个部分:环境安装配置和开发工具 一.集成环境安装配置 (一)安装 选择:wampserver或者xampp 我采用的是xampp. 在http://www.sourceforce.n ...
- 常用的功能封装 pool.js
//import { setInterval } from "timers"; //获取最大值 function getMax(){ var max = arguments[0]; ...
- BZOJ1491: [NOI2007]社交网络(Floyd 最短路计数)
Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2343 Solved: 1266[Submit][Status][Discuss] Descripti ...
- 爬虫学习(十二)——bs4实践案例
实践项目————诗词名句网<三国演义>小说爬取 import osimport reimport timeimport urllib.requestimport urllib.parsef ...