从零开始学习前端开发 — 14、CSS3变形基础
一、css3变形:
transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);
注:当多种变形方式综合在一起时,用空格隔开
1.旋转
a) rotateX(180deg) 沿x轴翻转 等价于 rotate3d(1,0,0,180deg)
b) rotateY(180deg) 沿y轴翻转 等价于 rotate3d(0,1,0,180deg)
c) rotate(60deg) 2d空间的旋转,正值为顺时针,负值为逆时针
d) rotateZ(180deg) 沿z轴翻转 等价于 rotate3d(0,0,1,180deg)
注:旋转单位为deg
2.缩放
a) scaleX(1.5) 沿x轴缩放,默认为1,不放大不缩小,值大于1时放大,小于1时缩小
b) scaleY(0.5) 沿y轴缩放
c) scale(1.5) 沿x轴和y轴同时缩放
d) scaleZ(1.5) 沿z轴缩放
3.倾斜
a) skewX(30deg) 沿x轴倾斜,单位为deg
b) skewY(-30deg) 沿y轴倾斜
c) skew(30deg,15deg) 沿x轴和y轴同时倾斜
skewX(30deg) skewY(15deg) x轴和y轴同时倾斜,效果不同于上面的写法
4.位移
a) translateX(200px) 沿x轴位移,向右为正,向左为负
b) translateY(-200px) 沿y轴位移,向上为负,向下为正
c) translate(100px) 默认不指定轴时,沿x轴位移
translate(100px,100px) 沿x轴和y轴同时位移
等价于
translateX(100px) translateY(100px)
d) translateZ(100px) 沿z轴位移,向前为正,向后为负,设置沿z轴的位移时,需要给父元素添加透视
注:如何使用translate实现不定宽高元素在屏幕窗口或父元素中水平垂直都居中
实现方式如下:
元素{
position:fixed|absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
二、改变变形中心点位置
transform-origin:left|center|right top|center|bottom;
三、变形综合
当我们将多种变形方式结合在一起时,改变顺序,效果有可能会不同
eg: transform:rotate(360deg) scale(1.5); 调换顺序,效果一样
transform:translateX(500px) rotate(360deg); 调换顺序,效果不一样
四、设置元素在2d空间变形还是3d空间变形
语法: transform-style:flat(默认值)|preserve-3d;
flat 2d变形
preserve-3d 3d空间的变形
五、透视,井深
描述:用来设置观察者距离物体的距离(3d效果的强度)
语法:
父元素{perspective:数值+单位;}
子元素{transform:perspective(300px) rotateY(45deg);}
从零开始学习前端开发 — 14、CSS3变形基础的更多相关文章
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 从零开始学习前端开发 — 1、HTML基础
一.web标准 web标准-网页制作的标准,它是由一系列标准组成的,主要包含三个方面:结构(html,xhtml),表现(css),行为(javascript) 注:结构和表现的标准由w3c(万维网联 ...
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 从零开始学习前端开发 — 11、CSS3选择器
一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- 从零开始学习前端JAVASCRIPT — 1、JavaScript基础
1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...
- 从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍
Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就 ...
随机推荐
- 【http转https】其之三 IIS_URL重写_http重定向到https
IIS_URL重写_http重定向到https 文:铁乐猫 2016年1月14日 IIS7以上支持URL Rewrite这个模块了,所以在我们做好了ssl证书这一块之后, 要对来自http的请求重定向 ...
- ubuntu 编译运行 opencv C++ 项目
ubuntu 编译运行 opencv C++ 项目 环境 ubuntu 16.04 opencv3.4.0 一. 编译方法 1)命令行 g++ imageResize.cpp -o resize `p ...
- mysql zip 版安装
http://jingyan.baidu.com/article/8cdccae946133f315513cd6a.html
- Python学习_01_对象
之前关于python的知识比较零散,这一个系列的随笔将python重新学习整理一遍.学习书籍<Python核心编程>第二版. Python对象基础 python并不是一个单纯面向对象的语言 ...
- linux上查找文件存放地点和文件中查找字符串方法
一.查找文件存放地点 1.locate 语法:locate <filename> locate命令实际是"find -name"的另一种写法,但是查找方式跟find不同 ...
- js设置元素class方法小结及classList相关
给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...
- 【Python3之模块及包的导入】
一.模块导入 1.定义 Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 模块让你能够有逻辑地组织你的 Python ...
- hadoop的安装和配置(一)本地模式
博主会用三篇文章来为大家详细的说明hadoop的三种模式: 本地模式 伪分布模式 完全分布模式 本地模式: 思路走向 |--------------------| | ①:配置Java环境 | | ...
- 腾讯云负载均衡CLB的那些“独门利器”
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:李想 腾讯人做产品一直是很贴近用户的需求的,腾讯云也不例外.负载均衡器作为公有云上的最基础的网络服务,几乎每家云厂商都会提供,虽然负载均衡 ...
- OwinHost.exe用法
简介 OwinHost.exe是微软提供的自宿主host,如果自己不想写owin的host,可以用这个. 官方对OwinHost的描述为:Provides a stand-alone executab ...