(-1) 写在头里
作者用的是chrome4玖，这些案例是从网上来看的，向那位同行致敬，提议大家在笔录自身上学感悟时，向本身同样加上笔名，被转载的时候还是能够留给点东西。
在研商slice-box.js的时候发现本身索要3D转变的学问，精通之后感到照旧差不离。
话说还没遇上二回web前端的面试，想当个实习生也不易于。壹天又过去了哟!
(-壹) 写在后面
小编用的是chrome49，那些案例是从网上看到的，向那位同行致敬，提出我们在笔录自身攻读感悟时，向笔者同索爱上笔名，被转载的时候还能够留给点东西。
在商讨slice-box.js的时候发现自个儿供给3D转变的学识，掌握之后感到如故差了一些。
话说还没境遇一遍web前端的面试，想当个实习生也不便于。一天又过去了啊!
三d改动-正方体-Html五Css3-遁地沙尘暴，正方体-html5css三-
一，调换定义：
(0)案例演示
(0)案例演示
(-一) 写在前方
小编用的是chrome4九，这一个案例是从网上看看的，向那位同行致敬，提出大家在记录自个儿读书感悟时，向自身同样加上笔名，被转载的时候还是能够留给点东西。
在商讨slice-box.js的时候发现本身索要3D调换的文化，明白之后认为照旧差不离。
话说还没际遇三回web前端的面试，想当个实习生也不便于。一天又过去了呀!
1，能够转移成分的形象，尺寸，地点
(一)知识储备
(一)知识储备
(0)案例演示
二，调换分三种：
a. perspective: 800px;
约等于镜头与被摄影物体之间的距离，近大远小。
a. perspective: 800px;
一定于镜头与被拍照物体之间的偏离，近大远小。
(一)知识储备
贰D转换：只辛亏X，Y轴爆发变动：
b. transform-style: preserve-3d;
其1值能让我们看出3d调换，暗许值是flat只好见到平面包车型地铁。
b. transform-style: preserve-3d;
以此值能让我们来看叁d转移，默许值是flat只雅观看平面包车型大巴。
a. perspective: 800px;
一定于镜头与被壁画物体之间的距离，近大远小。
例子：旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)
c.x、y、z轴
右边竖直代表y轴，右手水平表示x轴，z轴是即垂直x轴也垂直y轴的平行于地面包车型大巴直线。
c.x、y、z轴
左边竖直代表y轴，右手水平表示x轴，z轴是即垂直x轴也垂直y轴的平行于本地的直线。
b. transform-style: preserve-3d;
其一值能让大家见到三d更动，私下认可值是flat只可以见到平面包车型大巴。
3D更动：除了X，Y轴以外还是能Z轴变化。
d. x、y、z轴的顺时针旋转
z轴的顺时针旋转等同于石英钟秒针的顺时针旋转，大家拿食指沿着Z轴负方向模仿(指向显示屏方向)，只要退换沿着坐标轴方向(x轴负方向指向左面，y轴负方向指向上边)，就能体味别的七个轴的顺时针旋转了。
(2)代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=utf-8>
<title>为了生存</title>
<style type=”text/css”>
.stage
{
perspective: 800px;
}
.container
{
width: 150px;
height:150px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
height:200px;
transition:1s;
}
.container .side
{
position: absolute;
width: 150px;
height: 150px;
border:1px solid #0033FF;
text-align: center;
line-height: 150px;
}
.left
{
left:-152px;
transform: translateZ(-75px) rotateY(90deg);
transform-origin: right;
background:pink;
}
.right
{
left:152px;
transform: translateZ(-75px) rotateY(-90deg);
transform-origin: left;
background: black;
background-size:100% 100%;
}
.top
{
遁地沙暴。 top:-152px;
transform: translateZ(-75px) rotateX(-90deg);
transform-origin: bottom;
background:green;
background-size:100% 100%;
}
.bottom
{
top:152px;
transform:translateZ(-75px) rotateX(90deg);
transform-origin: top;
background:blue;
background-size:100% 100%;
}
.back
{
transform:translateZ(-75px);
background:orange;
background-size:100% 100%;
}
.front
{
transform:translateZ(75px);
background:red;
background-size:100% 100%;
}
.container:hover
{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class=”stage”>
<div class=”container”>
<div class=”side front”>前</div>
<div class=”side back”>后</div>
<div class=”side left”>左</div>
<div class=”side right”>右</div>
<div class=”side top”>上</div>
<div class=”side bottom”>下</div>
</div>
</div>
</body>
</html>
d. x、y、z轴的顺时针旋转
z轴的顺时针旋转等同于石英钟秒针的顺时针旋转，我们拿食指沿着Z轴负方向模仿(指向显示器方向)，只要改换沿着坐标轴方向(x轴负方向指向左面，y轴负方向指向上边)，就能体会其他三个轴的顺时针旋转了。
(2)代码
<!DOCTYPE html>
<html lang=”en”>
澳门葡京 ，<head>
<meta charset=utf-8>
<title>为了生存</title>
<style type=”text/css”>
.stage
{
perspective: 800px;
}
.container
{
width: 150px;
height:150px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
height:200px;
transition:1s;
}
.container .side
{
position: absolute;
width: 150px;
height: 150px;
border:1px solid #0033FF;
text-align: center;
line-height: 150px;
}
.left
{
left:-152px;
transform: translateZ(-75px) rotateY(90deg);
transform-origin: right;
background:pink;
}
.right
{
left:152px;
transform: translateZ(-75px) rotateY(-90deg);
transform-origin: left;
background: black;
background-size:100% 100%;
}
.top
{
top:-152px;
transform: translateZ(-75px) rotateX(-90deg);
transform-origin: bottom;
background:green;
background-size:100% 100%;
}
.bottom
{
top:152px;
transform:translateZ(-75px) rotateX(90deg);
transform-origin: top;
background:blue;
background-size:100% 100%;
}
.back
{
transform:translateZ(-75px);
background:orange;
background-size:100% 100%;
}
.front
{
transform:translateZ(75px);
background:red;
background-size:100% 100%;
}
.container:hover
{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class=”stage”>
<div class=”container”>
<div class=”side front”>前</div>
<div class=”side back”>后</div>
<div class=”side left”>左</div>
<div class=”side right”>右</div>
<div class=”side top”>上</div>
<div class=”side bottom”>下</div>
</div>
</div>
</body>
</html>
c.x、y、z轴
左边竖直代表y轴，右手水平表示x轴，z轴是即垂直x轴也垂直y轴的平行于本地的直线。
如：空间旋转。。。
(3)如何营造三个立体纺锤形
多个面包车型客车正方是重叠在联合具名的,
注意运用left等属性进行活动和选取translateX等品质实行移动有等价的时候也有不等价的时候，取决于tansform-origin属性。
front在z轴向前挪动了75px;back在z轴向后运动75px.
left，使用left属性向左移动152px，沿着z轴向后移动75px，已transform-origin:
right center 0为转变点沿y轴转动的90deg，right
，沿着z轴向后活动7五px，使用left属性向右移动152px，已transform-origin:
left center 0为调换点沿着y轴旋转-90deg，
top使用top属性向上移动15二px，沿着z轴向前挪动75px，已transform-origin:
center bottom
0;为转变点沿着x轴旋转-90deg，bottom使用bottom属性向下活动15二px，已transform-origin:
center top 0;为调换点沿着x轴方向旋转90deg。
从那之后几个立方搭建好了。
(3)怎样创设多少个立体长方形
多个面的正方是重叠在壹道的,
注意采用left等属性实行活动和平运动用translateX等品质进行活动有等价的时候也有不等价的时候，取决于tansform-origin属性。
front在z轴向前挪动了7五px;back在z轴向后运动7五px.
left，使用left属性向左移动15二px，沿着z轴向后运动7五px，已transform-origin:
right center 0为转换点沿y轴转动的90deg，right
，沿着z轴向后移动7伍px，使用left属性向右移动15②px，已transform-origin:
left center 0为转换点沿着y轴旋转-90deg，
top使用top属性向上移动15贰px，沿着z轴向前移动7五px，已transform-origin:
center bottom
0;为转换点沿着x轴旋转-90deg，bottom使用bottom属性向下移动15二px，已transform-origin:
center top 0;为转变点沿着x轴方向旋转90deg。
从这之后1个立方搭建好了。
d. x、y、z轴的顺时针旋转
z轴的顺时针旋转等同于机械钟秒针的顺时针旋转，大家拿食指沿着Z轴负方向模仿(指向显示器方向)，只要改动沿着坐标轴方向(x轴负方向指向左面，y轴负方向指向下边)，就能体会其余七个轴的顺时针旋转了。
(2)代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=utf-8>
<title>为了生存</title>
<style type=”text/css”>
.stage
{
perspective: 800px;
}
.container
{
width: 150px;
height:150px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
height:200px;
transition:1s;
}
.container .side
{
position: absolute;
width: 150px;
height: 150px;
border:1px solid #0033FF;
text-align: center;
line-height: 150px;
}
.left
{
left:-152px;
transform: translateZ(-75px) rotateY(90deg);
transform-origin: right;
background:pink;
}
.right
{
left:152px;
transform: translateZ(-75px) rotateY(-90deg);
transform-origin: left;
background: black;
background-size:100% 100%;
}
.top
{
top:-152px;
transform: translateZ(-75px) rotateX(-90deg);
transform-origin: bottom;
background:green;
background-size:100% 100%;
}
.bottom
{
top:152px;
transform:translateZ(-75px) rotateX(90deg);
transform-origin: top;
background:blue;
background-size:100% 100%;
}
.back
{
transform:translateZ(-75px);
background:orange;
background-size:100% 100%;
}
.front
{
transform:translateZ(75px);
background:red;
background-size:100% 100%;
}
.container:hover
{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class=”stage”>
<div class=”container”>
<div class=”side front”>前</div>
<div class=”side back”>后</div>
<div class=”side left”>左</div>
<div class=”side right”>右</div>
<div class=”side top”>上</div>
<div class=”side bottom”>下</div>
</div>
</div>
</body>
</html>
贰，转变属性（transform：使用二D，3D）：
(肆)怎么着看到立体旋转的成效
transition:一s;那性子子是身处五个面包车型大巴父成分container上，那种思考还选拔在布局与操纵上，我们旋转的是container，旋转的调换点也在那一个平面，暗许是transform:center
center 0px;因为营造正方体格局的案由，y轴正好位于前后的中游，左右的中游！
(四)怎么着看到立体旋转的成效
transition:一s;那个性情是身处五个面包车型客车父元素container上，那种思维还利用在布局与调整上，大家旋转的是container，旋转的转换点也在那些平面，暗中认可是transform:center
center 0px;因为营造正方体形式的原委，y轴正好位于前后的高级中学级，左右的中等！
(3)怎么着营造几个立体长方形
多个面包车型地铁四方是重叠在一道的,
注意运用left等品质进行移动和选用translateX等天性进行运动有等价的时候也有不等价的时候，取决于tansform-origin属性。
front在z轴向前移动了7伍px;back在z轴向后移动7五px.
left，使用left属性向左移动15二px，沿着z轴向后活动7伍px，已transform-origin:
right center 0为调换点沿y轴转动的90deg，right
，沿着z轴向后运动7伍px，使用left属性向右移动15二px，已transform-origin:
left center 0为调换点沿着y轴旋转-90deg，
top使用top属性向上移动15二px，沿着z轴向前挪动7伍px，已transform-origin:
center bottom
0;为转变点沿着x轴旋转-90deg，bottom使用bottom属性向下活动15二px，已transform-origin:
center top 0;为调换点沿着x轴方向旋转90deg。
迄今二个立方搭建好了。
1，提示：
(5)疑惑
(5)疑惑
(肆)怎么着看到立体旋转的成效
transition:一s;那本性子是投身三个面包车型客车父元素container上，那种思维还选用在布局与调控上，大家旋转的是container，旋转的转变点也在那一个平面，暗许是transform:center
center 0px;因为营造正方体格局的来由，y轴正好位于前后的中等，左右的中等！
方今浏览器并不是一点一滴辅助全体的Transform ，IE九、Firefox 和Opera
仅帮忙二D transforms ，相应的CSS定义为：-ms-transform 、-moz-transform 和-o-transform ，而Safari 和Chrome 都帮助2D和3D
transforms ，相应的CSS定义为：-webkit-transform 。
a. perspective: 800px;
坐落container会看到其余1种效应，笔者思疑是因为定位点形成container，那么在container前边的就会推广，前面就被缩短，从而导致别的几面包车型地铁转移。可当后边旋转到前面时，后边的轻重缓急怎么不转变，哪位同行知道麻烦解答下
a. perspective: 800px;
座落container会看到此外壹种成效，小编揣测是因为定位点变成container，那么在container前面包车型大巴就会推广，后边就被压缩，从而形成其他几面包车型大巴变迁。可当前面旋转到前方时，前面包车型大巴尺寸怎么不调换，哪位同行知道麻烦解答下
(5)疑惑
2，取值：
b.塑造立体星型还是能动用如下方式
.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}
.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}
.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}
.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}
.front{transform: translateZ(152px);z-index:2;}
.back{z-index:1;}
设置背景颜色后沿着X轴旋转，旋转到底层的会看出此外面都以底层的水彩，哪位同行知道麻烦解答下。
b.营造立体长方形仍是能够采用如下格局
.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}
.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}
.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}
.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}
.front{transform: translateZ(152px);z-index:2;}
.back{z-index:1;}
设置背景颜色后沿着X轴旋转，旋转到底层的会看出任何面都是底层的颜料，哪位同行知道麻烦解答下。
a. perspective: 800px;
位于container会看到其余一种作用，小编估计是因为定位点产生container，那么在container后面的就会加大，前边就被压缩，从而造成其余几面包车型大巴变迁。可当后边旋转到前方时，前边的大小怎么不转换，哪位同行知道麻烦解答下
transform: none（私下认可值，表示成分不进行调换）
b.营造立体星型还足以行使如下方式
.left{left:-152px;transform: rotateY(90deg);transform-origin: right;}
.right{left:152px;transform: rotateY(-90deg);transform-origin: left;}
.top{top:-152px;transform: rotateX(-90deg);transform-origin: bottom;}
.bottom{top:152px;transform: rotateX(90deg);transform-origin: top;}
.front{transform: translateZ(152px);z-index:2;}
.back{z-index:1;}
安装背景颜色后沿着X轴旋转，旋转到底层的会看到任何面都以底层的水彩，哪位同行知道麻烦解答下。
(-一) 写在前方
作者用的是chrome4玖，那一个案例是从网上看看的，向那位同行致敬，建议大家在…
transform-functions（表示二个依然多个转移函数，中间以空格分开）:
解释：CSS三变形是一些功效的聚合，比如移动、旋转、缩放和倾斜效果，各种效果都被称作为变形函数（Transform Function）
写法：
transform：: rotate(angle) scale(x,y)／（0～1的值）skewX(angle)
translate(x,y);
3,transform-origin()属性:
一),暗许境况，变形的原点在要素的中央点;
写法：transform-origin : 数值/百分比/关键字（left，right，top，bottom）;
二个值：表示全体轴的岗位
两个值：表示 X 轴和 Y 轴
三个值：表示 X 轴、Y 轴和 Z 轴；
4，2D位移：
1）translate(平移) 可取值：数值、百分比，也足以是负值
二）scale(缩放)
可取值：默许值为一，缩短：0 到 一 之间的数值，放大：大于 1的数值；
三）rotate(旋转)
可取值：依据原点，将成分遵照顺时针旋转给定的角度
允许负值，成分将逆时针旋转
四）skew(倾斜)
可取值；以原点地点，围绕 X 轴和 Y
轴，也得以听从一定的角度倾斜，或许会改造元素的形态
5，transform-style属性也是3D效果中时常使用的，
1）flat值为私下认可值，表示全体子成分在贰D平面彰显。preserve-3d表示具备子成分在3D空间中显现。
2）如果对2个要素设置了transform-style的值为flat，则该因素的富有子成分都将被平整到该因素的二D平面中进行彰显。沿着X轴或Y轴方向旋转该因素将产生位刘芳或负Z轴地方的子成分显示在该因素的平面上，而不是它的先头或然前边。假诺对3个要素设置了transform-style的值为preserve-叁d，它意味着不实行平展操作，他的具有子成分位于3D空间中。
transform-style属性须要设置在父成分中，并且超过其余嵌套的变产生分。
Demo：
HTML：
<div class=”wrap”>
<div class=”spin”>
<div class=”rotate”>
<img src=”3d-distance.jpg” alt=”” width=”142″
height=”200″ />
</div>
</div>
</div>
<div class=”wrap”>
<div class=”spin”>
<div class=”rotate three-d”>
<img src=”3d_axes.png” alt=”” width=”142″ height=”200″
/>
</div>
</div>
</div>
CSS：
.wrap {
width: 500px;
height: 300px;
margin: 30px auto;
position: relative;
background: url(68.jpg) no-repeat center center;
background-size: 100% 100%;
}
.spin {
width: 142px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -72px;
margin-top: -101px;
border: 1px dashed orange;
cursor: pointer;
transform-style: preserve-3d;
}
.rotate {
background: url(images/cardKingClub.png) no-repeat center;
background-size: 100% 100%;
border: 5px solid hsla(50,50%,50%,.9);
transform: perspective(200px) rotateY(45deg);
}
.rotate img{
border: 1px solid green;
transform: rotateX(15deg) translateZ(10px);
transform-origin: 0 0 40px;
}
/*退换transform-style的私下认可值*/
.three-d {
transform-style: preserve-3d;
}
6，3D转换
一）perspective 属性（汉语意思是：透视，视角）
perspective属性设置镜头到成分平面包车型地铁相距。全数因素都以放置在z=0的平面上。比如perspective(300px)表示，镜头距离成分表面的任务是300像素。
2）特点：
a，为要素定义 perspective
属性时，其子成分会拿走透视效果，而不是因素本人
b，只影响 3D 调换来分
注意点；私下认可是3D效果不精通？那是因为镜头离平面太远了，所以旋转效果不醒目。试试perspective属性。设置perspect=400px。
3）3D 位移首要含有
translateZ(z)
translate3d(x,y,z)
解释：对于尚未rotateX以及rotateY的成分，translateZ的功能正是让要素在温馨的前边或近或远（结合黑板上的图）；
四）3D 旋转首要含有
rotateX(deg)
rotateY(deg)
rotateZ(deg)
rotate3d(x,y,z,deg)
5）3D 缩放主要含有
scaleZ(z)
scale3d(x,y,z)
demo：
HTML：
<section id=”darkblue” class=”container”>
<div class=”box”></div>
</section>
CSS：
.container {
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid gray;
}
.box {
width: 100%;
height: 100%;
opacity: .75;
}
#darkblue {
perspective: 600px;
}
#darkblue .box {
background-color: darkblue;
transform: translateZ(50px);
}