css3 变换 transform(2D)
一、transform变换
可做拉伸、压缩、旋转、偏移的效果。需加各个浏览器前缀。
二、transform-origin
为transform属性值的基点,默认值为元素的中心位置,即以元素左上角为坐标轴原点,向右为x轴,向下为y轴,基点为(50%,50%)。
1. transform-origin:x y z;
1)x轴 取值:left/center/right/length/%
百分比换算:
left-------------0%
center----------50%
right------------100%
2)y轴 取值:top/center/bottom/length/%
百分比换算:
top--------------0%
center----------50%
right------------100%
3)z轴 取值:length
2D默认为0,3D效果设置。
三、transform的属性值
1.旋转 rotate(deg)
通过指定的角度参数对元素以基点进行2D旋转。单位为deg。
2.移动 translate(x,y)
始终相对于元素中心偏移。单位为px。
translateX(x);水平方向上的偏移量
translateY(y);垂直方向上的偏移量
3.缩放 scale(x,y)
当值=1为原大小;值>1为放大;值<1为缩小。单位无。
scaleX(x);水平方向上的缩放
scaleY(y);垂直方向上的缩放
4.倾斜 skew(x,y)
给选定的元素进行以基点为中心的倾斜。单位为deg。
skewX(x);水平方向上的倾斜
skewY(y);垂直方向上的倾斜
5.矩阵 matrix(rotateX,rotateY,rotate3D,translateZ,translate3D,scaleZ,scale3D)
矩阵一共有6个参数。
css3 变换 transform(2D)的更多相关文章
- css3 变换、过渡效果、动画
1 CSS3 选择器 1.1 基本选择器 1.2 层级 空格 > + .item+li ~ .item~p 1.3 属性选择器 [attr] [attr=value] [attr^=value] ...
- 好吧,CSS3 3D transform变换,不过如此!
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- css3 过渡和2d变换——回顾
1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...
- 好吧,CSS3 3D transform变换,不过如此!——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- 关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- 【CSS3练习】transform 2d变形实例练习
transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- 数据库MySQL安装和校验
1.安装MySQL 双击已经下载的安装包: Typical:典型安装,第一次安装建议选择该类安装 Custom:自定义安装,在对数据库熟悉后,知道自己需要哪些组件时,可以选择该类安装(这里选择的是自定 ...
- Java常用集合体系以及相互区别
Collection集合特点: 1.2.1一些 collection 允许有重复的元素,而另一些则不允许 1.2.2一些 collection 是有序的,而另一些则是无序的 [有序是指与添加的顺序一致 ...
- Coursera 机器学习笔记(六)
主要为第八周内容:聚类(Clustering).降维 聚类是非监督学习中的重要的一类算法.相比之前监督学习中的有标签数据,非监督学习中的是无标签数据.非监督学习的任务是对这些无标签数据根据特征找到内在 ...
- JavaScript设计模式_02_策略模式
在程序设计中,我们常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. /* * pre:策略模式 * 示例:公司计算奖 ...
- CentOS 7 for ARM 安装一键Lnmp失败
背景 前面把树莓派装上了CentOS 7,趁着国庆放假回来赶紧把服务端环境搭起来,为了方便就准备用一键lnmp快速部署一个,结果死活安装不成功... 报错 按照以往的经验进行安装,在我的小树莓派上安装 ...
- Java虚拟机14:Java对象大小、对象内存布局及锁状态变化
一个对象占多少字节? 关于对象的大小,对于C/C++来说,都是有sizeof函数可以直接获取的,但是Java似乎没有这样的方法.不过还好,在JDK1.5之后引入了Instrumentation类,这个 ...
- 前端的3D(css3版本)
其实是依托Css3的功劳,先上一个例子 代码地址:链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh 这动画纵有万般变化,也离不开以下几个属性 transfor ...
- Bash中单引号和双引号的区别
单引号和双引号的区别 单引号:必须成对使用,它可以保护所有的字符不被翻译.如变量$1,和奇数个单引号的作用相同,偶数个单引号=1个双引号双引号:必须成对出现,它可以保护一些元字符不被翻译,但允许变量和 ...
- mysql+keepalived 双主热备高可用
理论介绍:我们通常说的双机热备是指两台机器都在运行,但并不是两台机器都同时在提供服务.当提供服务的一台出现故障的时候,另外一台会马上自动接管并且提供服务,而且切换的时间非常短.MySQL双主复制,即互 ...
- 连接SQL SERVER数据库实例出错
问题背景: 刚买的新电脑,昨天让公司IT部装了win10专业版系统,想体验一下.装完后一切正常,晚上带回家装自己需要的软件和系统更新,结果今天来公司发现数据库实例连不上了,拿到IT部,他们也没有找到原 ...