[TOC]
# 2D变形
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变形转换 transform
## 移动 translate(x, y)
~~~
translate(50px,50px);
~~~
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
~~~
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
~~~
~~~
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}
~~~
让定位的盒子水平居中
## 缩放 scale(x, y)
~~~
transform:scale(0.8,1);
~~~
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
~~~
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
~~~
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
~~~
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
}
div:hover {
transform: scale(2); /*x 水平缩放 y垂直缩放 如果只写一个参数， 宽度和高度都缩放*/
}
section {
width: 632px;
height: 340px;
margin: 0 auto;
overflow: hidden; /*溢出隐藏*/
border: 2px solid red;
}
section img {
transition: all 0.2s; /*因为图片缩放了,实际图片做动画 所以过渡要给img 做动画 谁做动画，谁加过渡*/
}
section:hover img { /*鼠标经过section 的时候 里面的img做 缩放*/
transform: scale(1.2);
}
</style>
<body>
<div></div>
<section>
<img src="images/mi.jpg" alt=""/>
</section>
~~~
## 旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
~~~
transform:rotate(45deg);
~~~
1. 当元素旋转以后，坐标轴也跟着发生的转变
2. 调整顺序可以解决，把旋转放到最后
3. 注意单位是 deg 度数
~~~
<style>
img {
margin: 100px;
transition: all 0.5s;
border-radius: 50%;
}
img:hover {
/*transform: rotate(-90deg); deg 度数*/
transform: rotate(720deg);
/* deg 度数*/
}
</style>
<body>
<img src="images/mi.jpg" alt="" />
</body>
~~~
## 倾斜 skew(deg, deg)
~~~
transform:skew(30deg,0deg);
~~~
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
## transform-origin调整元素转换的原点
~~~
div{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
~~~
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。
~~~
div{transform-origin: 10px 10px;transform: rotate(45deg); } /* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */
~~~
~~~
<style>
img {
margin: 100px;
transition: all 0.5s;
transform-origin: 20px 30px;
}
img:hover {
/*transform: rotate(-90deg); deg 度数*/
transform: rotate(720deg);
/* deg 度数*/
}
</style>
<body>
<img src="images/mi.jpg" alt="" />
</body>
~~~
## 定位的盒子垂直居中
~~~
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/*transform: translate(100px) 水平移动100像素*/
/*transform: translate(50%) translate 如果移动的距离是%
不是以父级宽度为准，以自己宽度为准*/
/*transform: translate(50%); y意思就是让div盒子 自己宽度200 的一半 走 100像素*/
/*已让我们让定位的盒子居中对齐*/
position: absolute;
left: 50%; /*以父级宽度为准*/
top: 50%;
/*margin-left: -100px; 需要计算不合适*/
transform: translate(-50%, -50%);
}
</style>
<div></div>
~~~
# 3D变形(CSS3) transform
~~~
2d x y
3d x y z
~~~
左手坐标系
伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。
这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。
简单记住他们的坐标：
x左边是负的，右边是正的
y 上面是负的， 下面是正的
z 里面是负的， 外面是正的
## rotateX()
就是沿着 x 立体旋转
~~~
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
~~~
## rotateY()
沿着y轴进行旋转
~~~
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
~~~
## rotateZ()
沿着z轴进行旋转
~~~
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
~~~
## 透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
* 透视原理： 近大远小 。
* 浏览器透视：把近大远小的所有图像，透视在屏幕上。
* perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，**设置给父元素**，作用于所有3D转换的子元素
理解透视距离原理：
~~~
<style>
body {
perspective: 1000px; /*视距 距离 眼睛到屏幕的距离 视距越大效果越不明显 视距越小，透视效果越明显*/
}
img {
margin: 100px;
transition: all 5s;
}
img:hover {
transform: rotateY(360deg);
}
</style>
<img src="images/1498446043198.png" WIDTH="300" alt=""/>
~~~
### translateX(x)
仅水平方向移动（X轴移动）
主要目的实现移动效果
### translateY(y)
仅垂直方向移动（Y轴移动）
### translateZ(z)
transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。
### translate3d(x,y,z)
\[注意\]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值
~~~
<style>
body {
perspective: 600px;;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
}
div:hover {
/*transform: translateX(100px);*/
/*transform: translateY(100px);*/
transform: translateZ(300px);
/*透视是眼睛到屏幕的距离 透视只是一种展示形式 是有3d效果的意思*/
/*translateZ是物体到屏幕的距离 Z是来控制物体近大远小的具体情况*/
/*translateZ 越大，我们看到的物体越近，物体越大*/
/*transform: translate3d(x, y, z); x 和 y 可以是 px 可以是 % 但是z 只能是px*/
transform: translate3d(100px, 100px, 300px);
}
h2 {
transform: translate3d(0, 50px, 0);
transition: all 0.8s;
}
h2:hover {
transform: translate3d(0,0,0);
}
</style>
<div></div>
<h2>每一毫米的突破</h2>
~~~
# backface-visibility元素不面向屏幕时是否可见
`backface-visibility` 属性定义当元素不面向屏幕时是否可见
**翻转盒子案例**
~~~
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
/*transform-style: preserve-3d;*/
/* 1.保留当前空间位置
2.是图片扁平化*/
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 8s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /*不是正面对向屏幕，就隐藏*/
}
div:hover img {
transform: rotateY(180deg);
}
</style>
<div>
<img src="images/qian.svg" alt=""/>
<img src="images/hou.svg" alt=""/>
</div>
~~~
- HTML
- 标签
- 超链接
- 列表
- 表格和表单
- h5新增标签
- 快捷方式
- 标签包含
- CSS
- 选择器
- 行内,块元素,链接
- css三大特性
- 盒子模型
- 定位
- css可见性
- emment书写
- 文本元素
- 外观属性
- 背景
- 浮动
- ps
- 用户界面样式
- 显示和隐藏
- 过渡
- 2D,3D变形
- 动画animation
- 伸缩布局(CSS3)
- BFC
- 优雅降级和渐进增强
- 3D旋转
- 双飞翼和圣杯
- JS基础
- 输出消息的几种方式
- 数据类型
- Date对象
- Math对象
- Array对象
- 字符串常用方法
- 数据类型转换
- 等号运算
- 代码调试
- 数组
- 函数
- WebAPI
- webapi简介
- 获取页面元素
- 事件
- 属性操作
- 创建元素
- 节点操作
- 事件详解
- BOM
- 位置相关属性
- 拖拽弹窗
- 弹出层加遮罩
- ES6
- let和const
- 解构表达式变化
- 函数优化
- map和reduce
- nrm
- npm
- npm基础
- package.json
- 淘宝镜像
- webpack
- 介绍
- 多入口文件(Multiple entry files)
- Webpack CSS loader加载器
- webpack Image loader 加载图片
- uglify-js压缩打包JS
- webpack构建本地服务器
- vue内部指令
- v-if,v-show,v-for
- v-text,v-html
- v-on
- v-model
- v-bind
- v-pre,v-cloak,v-once
- vue全局api
- Vue.directive 自定义指令
- vue.extend构造器的延伸
- vue.set全局操作
- Vue的生命周期（钩子函数)
- Template 制作模版
- Component 初识组件
- Component 组件props 属性设置
- Component 父子组件关系
- Component 标签
- vue选项
- propsData Option全局扩展数据传递
- computed Option 计算选项
- Methods Option 方法选项
- watch选项监控数据
- Mixins 混入选项操作
- Extends Option 扩展选项
- delimiters 选项
- vue实例和内置组件
- 实例属性
- 实例方法
- 实例事件
- 内置组件 -slot
- vue-cli
- vue-cli介绍
- 项目目录结构
- vue-cli模板
- vue-router
- 简介
- 配置子路由
- 参数传递
- 单页面多路由区域操作
- url传递参数
- vscode