HTML5 和 CSS3 提高篇 下 2D转换 transform(移动、旋转、缩放、中心点、综合写法);动画(animation);3D转换;浏览器私有前缀;背景色线性渐变
------ 2D 转换(transform)移动、旋转、缩放、中心点 -------
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
转换(transform)你可以简单理解为变形
- 移动:translate
- 旋转:rotate
- 缩放:scale
1.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系
1.2 2D 转换之移动 translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
1. 语法
x就是x轴上移动位置,y就是y轴上移动,中间用逗号分隔
如果写 百分比 就是相对于自身的 百分比transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
2. 重点
- 定义 2D 转换中的移动,沿着 X 和 Y 轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
- 对行内标签没有效果
1.3 2D 转换之旋转 rotate
2D旋转指的是让元素在2维平面内 顺时针旋转 或者 逆时针旋转。
1. 语法
transform:rotate(度数) 单位是 deg 比如 45deg -45deg 就是逆时针
2. 重点
- rotate里面跟度数, 单位是 deg 比如 rotate(45deg)
- 角度为正时,顺时针,负时,为逆时针
- 默认旋转的中心点是元素的中心点
3. 案例:三角形
p::before {content: '';position: absolute;right: 20px;top: 10px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);}
1.4 2D 转换中心点 transform-origin
我们可以设置元素转换的中心点
1. 语法
transform-origin: x y;
2. 重点
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点 (50% 50%)
- 还可以给x y 设置 像素 或者 方位名词 (top bottom left right center)
1.5 2D 转换之缩放scale
缩放,顾名思义,可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。
1. 语法
transform:scale(x,y);
2. 重点
- 注意其中的x和y用逗号分隔
- transform:scale(1,1) :宽和高都放大一倍,相对于没有放大
- transform:scale(2,2) :宽和高都放大了2倍
- transform:scale(2) :只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
- transform:scale(0.5,0.5):缩小
- sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
1.6 2D 转换综合写法
注意:
- 同时使用多个转换,其格式为:transform: translate() rotate() scale() …等,
- 其顺序会影转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前
/* transform: rotate(180deg) translate(50px,50px); *//* 我们同时有位移和其他属性时,我们需要把位移放到最前面 */transform: translate(50px,50px) rotate(180deg) scale(1.2);
1.7 2D 转换总结
- 转换transform 我们简单理解就是变形 有2D 和 3D 之分
- 我们暂且学了三个 分别是 位移 旋转 和 缩放
- 2D 移动 translate(x, y) 最大的优势是不影响其他盒子, 里面参数用%,是相对于自身宽度和高度来计算的
- 可以分开写比如 translateX(x) 和 translateY(y)
- 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg
- 2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
- 设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
- 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前
--------------------- 动画 (animation) ------------------
动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
1.1 动画的基本使用
制作动画分为两步:
- 先定义动画
- 再使用(调用)动画
1. 用keyframes 定义动画(类似定义类选择器)
@keyframes 动画名称 {0%{width:100px;} 100%{width:200px;}}
动画序列:
- 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。
- 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
2. 元素使用动画
div {width: 200px;height: 200px;background-color: aqua;margin: 100px auto;/* 调用动画 */animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间;}
1.2 动画常用属性
动画的属性 动画名称: 规定 @keyframes动画的名称。 必须要有 */animation-name: move;持续时间: 规定动画完成一个周期所花费的秒或毫秒,默认是0。 必须要有 */animation-duration: 2s;运动曲线: 规定动画的默认曲线,默认是 "ease"* linerar是匀速的意思/animation-timing-function: ease;何时开始: 下方是延迟一秒开始 默认是 0 。 */animation-delay: 1s;重复次数: count是次数 默认是 1 次 infinite是无限循环 */animation-iteration-count: infinite;是否反方向播放: 默认是 "normal" ,"alternate"是逆播放 */animation-direction: alternate;动画是否正在运行或暂停: 默认是"running",还有"pause"。 */跟鼠标配合使用 fover 当鼠标放在就动, 移开就停止 */animation-play-state: running;动画结束后状态: 默认是回到起始状态 backwards。 停留在结束状态是forwards */animation-fill-mode: backwards;} /* 曲线调节速度 属性 */animation--timing-function:linear 动画从头到尾的速度是相同的。匀速:ease 默认的。动画以低速开始,然后加速,在结束前变慢:ease-in 动画以低速开始:ease-out 动画以低速结束:ease-in-out 动画以低速开始和结束:steps() 指定了时间函数中的间隔数量(步长,比如5步,就是分5段来走)
1.3 动画简写属性
animation:动画名称 持续时间 运动曲线 何时播放 播放次数 是否反方向 动画起始或结束时的状态 按顺序写,前 两个 属性不能省略!!! animation: myfirst 5s linear 2s infinite alternate forwards;
- 简写属性里面不包含 animation-play-state ( 他是跟鼠标配合使用 fover 当鼠标放在就动 )
- 暂停动画:animation-play-state: puased; 经常和鼠标经过等其他配合使用
- 想要动画走回来 ,而不是直接跳回来:animation-direction : alternate
- 盒子动画结束后,停在结束位置: animation-fill-mode : forwards
1.4 速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是“ease”
查看上面
--------------------- 3D 转换 ------------------
1.1 三维坐标系
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
- x轴:水平向右 注意: x 右边是正值,左边是负值
- y轴:垂直向下 注意: y 下面是正值,上面是负值
- z轴:垂直屏幕 注意: 往外面是正值,往里面是负值
3D 转换我们主要学习工作中最常用的 3D 位移 和 3D 旋转
主要知识点:
- 3D位移: translate3d(x,y,z)
- 3D旋转: rotate3d(x,y,z)
- 透视: perspective
- 3D呈现 transfrom-style
1.2 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
- translform:translateX(100px):仅仅是在x轴上移动
- translform:translateY(100px):仅仅是在Y轴上移动
- translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
- transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离
因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动
1.3 透视 perspective
在2D平面产生近大远小视觉立体,但是只是效果二维的
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
- 模拟人类的视觉位置,可认为安排一只眼睛去看
- 透视我们也称为视距:视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大,越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子上面的:
**d:**就是视距,视距就是一个距离人的眼睛到屏幕的距离。
**z:**就是 z 轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大。
1.4 Z轴上移动 translateZ
translform:translateZ(100px):仅仅是在Z轴上移动。有了透视,就能看到 translateZ 引起的变化了
- translateZ:近大远小
- translateZ:往外是正值
- translateZ:往里是负值
1.5 3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。
语法:
- transform:rotateX(45deg):沿着x轴正方向旋转 45度
- transform:rotateY(45deg) :沿着y轴正方向旋转 45deg
- transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
- transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)
对于元素旋转的方向的判断 我们需要先学习一个左手准则。
左手准则:
- 左手的手拇指指向 x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
- 左手的手拇指指向 y轴的正方向
- 其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)
xyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。
- transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
- transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
1.6 3D呈现 transfrom-style
- 控制子元素是否开启三维立体环境。。
- transform-style: flat 子元素不开启3d立体空间 默认的
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级,但是影响的是子盒子
- 这个属性很重要,后面必用
1.7 案例:两面翻转的盒子
1. 搭建HTML结构
- box父盒子里面包含前后两个子盒子
- box 是翻转的盒子 front是前面盒子 back是后面盒子
<div class="box"><div class="front">黑马程序员</div><div class=“back">pink老师等你</div></div>
2. CSS样式
- box指定大小,切记要添加3d呈现
- back盒子要沿着Y轴翻转180度
- 最后鼠标经过box 沿着Y旋转180deg
--------------------- 浏览器私有前缀 ------------------
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。
1. 私有前缀
- -moz-:代表 firefox 浏览器私有属性
- -ms-:代表 ie 浏览器私有属性
- -webkit-:代表 safari、chrome 私有属性
- -o-:代表 Opera 私有属性
2. 提倡的写法
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
--------------------- 背景线性渐变 ------------------
- 背景渐变必须添加浏览器私有前缀
- 起始方位可以是:方位名词 或者 度数 ,如果默认就是从上往下。
background: linear-gradient(起始方向,颜色1,颜色2,...); background: -webkit-linear-gradient(left, red, blue); background: -webkit-linear-gradient(left top, red, blue);}
HTML5 和 CSS3 提高篇 下 2D转换 transform(移动、旋转、缩放、中心点、综合写法);动画(animation);3D转换;浏览器私有前缀;背景色线性渐变相关推荐
- web前端基础 html5+css3(十二.2D转换,动画,3D转换)
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
- CSS3新特性(属性选择器 、结构伪类选择器、2D/3D转换、动画、浏览器私有前缀)
这里写目录标题 一.CSS3 属性选择器 二.CSS3 结构伪类选择器 三. CSS3 伪元素选择器 四.CSS3 2D转换 1.2D 转换之移动 translate 2.2D 转换之旋转 rotat ...
- 【实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!
目录 [实战HTML5与CSS3 第一篇]初探水深,美丽的导航,绚丽的图片爆炸!! [实战HTML5与CSS3 第二篇]绚丽的快速导航! [实战HTML5与CSS3 第三篇]我第一个HTML5网页诞生 ...
- 实战HTML5与CSS3 第一篇】初探水深,美丽的导航,绚丽的图片爆炸!!
[实战HTML5与CSS3 第一篇]初探水深,美丽的导航,绚丽的图片爆炸!! [实战HTML5与CSS3 第二篇]绚丽的快速导航! [实战HTML5与CSS3 第三篇]我第一个HTML5网页诞生了(提 ...
- HTML5 和 CSS3 提高
目录 一.HTML5 和 CSS3 提高 1. HTML5 的新增特性 1.1 HTML5 新增的语义化标签 1.2 HTML5 新增的多媒体标签 1.2.1 视频 < video > 1 ...
- 375~407(2D+动画+3D+浏览器私有前缀)
4 2D转换 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果 移动:translate 旋转:rotate 缩放:scale 4.1 二维坐标系 2D ...
- HTML5简介(补充. 浏览器私有前缀)
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加. 1. 私有前缀 2. 提倡的写法 -moz-border-radius: 10px; -webkit-border-radius: ...
- css3中animation动画、浏览器私有前缀、文字阴影
animation动画: 可以设置多个节点来控制一个或 一组动画,动画可以实现更多变化,更多控制,连续自动播放等效果.动画的使用分两步:1.定义动画 2.调用动画(调用必须写调用名称和持续时间),其属 ...
- CSS3之转换(2D转换,动画,3D转换)
@TOC 1. 2D转换 1.1 2D转换之移动translate 1.1.1 translate基本使用 <!DOCTYPE html> <html lang="en&q ...
最新文章
- 走钢索的人---走出软件作坊:三五个人十来条枪 如何成为开发正规军(十七)...
- Android sim卡清空,Android手机卡了?用这几种方法变回来...
- 【web前端开发】介绍div+css的6个优点
- MongoDB学习day05--MongDB开启权限验证,创建用户
- git clone 添加代理_用树莓派3搭建私有git代码仓库
- SAP License:SAP问题二则
- RSS文件的基本格式
- 有效利用GRE红宝书
- 【独家分享】QQ常见网络骗术***战
- ETABS和SAP2000中质量源的定义
- HTML5字体设置重影,Word怎么设置字体重影
- 全新整理:微软、谷歌、百度等公司经典面试100题[第1-60题]
- 1525D. Armchairs
- ubuntu系统下u盘只读的解决办法
- wordpress文章页面添加版权信息的四种方法
- 渐进式加载-基础讲解
- 字体文件检查工具Webfont Generator
- DataBinding详解
- Cesium中加载地形影像切片,以及3dtiles和shp及kml方法
- 上顿号符号_标点符号的用法一一顿号