目录
4.透视perspective属性和perspective（）函数
css3D变形主要 位移，旋转，缩放这3种变形，当然还有让我们能看出3D效果的一些重要属性，perspective（透视的视距），transform-style决定其子元素是否以3D的效果展现 ，backface-visibility决定旋转到元素的背面是否可见。下面我会举例子，
1.旋转
旋转主要包括，rotateX（），rotateY（），rotateZ（），以及rotate3d（）
transform:rotateX(30deg）就是元素围绕X轴顺时针旋转30度，如果取值为负，则逆时针旋转
rotateY（）就是元素围绕y轴旋转，rotateZ（）元素围绕Z轴旋转
下面是X Y Z轴的示意图，网格面就代表屏幕，Z轴是垂直于屏幕向外的。
下面看一看rotateX（） rotateY（） rotateZ（）的具体效果
虽然rotateZ（）看上去效果跟2D平面旋转的视觉效果一样，但是其实是在3D空间旋转。
2.平移
3D变形的平移 包括translateX（），translateY（），translateZ（），translate3d（x,y,z）。里面的值可以是百分数，也可以是像素。当单位是百分数的时候，是基于父元素的width计算的。
3D变形的平移对于2D多了一个translateZ（）
translate3d()就包含了translateX()，translateY（），translateZ（）
translateX（），和translateY（）就不多说了，关键是translateZ（）
下面看translateZ（）的一个例子
<!DOCTYPE html>
<html>
<head>
<title>translateZ</title>
</head>
<body>
<div class="stage">
<div class="translateZ"></div>
</div>
<style type="text/css" media="screen">
.stage{
width: 500px;
height: 500px;
margin:50px auto;
perspective: 500px;
position: relative;
}
.translateZ{
position: absolute;
left: 40%;
top:50%;
width: 200px;
height: 200px;
margin:-100px 0 0 -100px;
background-color: red;
transition: transform 2s;
/*transform: rotateY(90deg);*/
perspective: 500px;
}
.translateZ:hover{
transform: translateZ(400px);
}
</style>
</body>
</html>当鼠标悬停在红色的方块的时候，translateZ的值被改变。元素就好像变的越来越大，甚至占满整个屏幕。因为当调整了translateZ的值时，元素离我们比较近，我们看到的方块也就变大了，近大远小。
注意：当translateZ()和旋转结合在一起，而且translateZ()取值为正，那么这个元素就会朝着自己面向的方向前进，如果没有设置旋转，就会面朝屏幕外面走去，就像上述的例子效果一样。
具体请看一个3D立方体的例子
没有加translateZ(100px)，各个面在同一位置，然后做了旋转处理。各个面重合在一起。
加了translateZ（100px）之后，每个面都朝着自己面向的方向前进100px,各个面的间距拉开，变成了一个立方体。
.front{
transform: translateZ(100px);
}
.back{
transform: rotateX(180deg) translateZ(100px);
}
.left{
transform: rotateY(-90deg) translateZ(100px);
}
.right{
transform: rotateY(90deg) translateZ(100px);
}
.top{
transform: rotateX(90deg) translateZ(100px);
}
.bottom{
transform: rotateX(-90deg) translateZ(100px);
}3.缩放
3D缩放主要包括scaleZ（）和scale3d（x,y,z）。x,y,z代表在x,y,z轴的缩放比例
注意scaleZ（），scale3d（）在单独使用的时候没有任何效果，只有配合其他函数才能看出效果。
下面看一个纸牌缩放的实例
<div class="stage">
<div class="container">
<div class="item1"><img src="图片翻转/正面.jpg"></div>
<div class="item2"><img src="图片翻转/正面.jpg"></div>
<!-- <div class="item3"><img src="图片翻转/正面.jpg"></div> -->
</div>
</div>
<style type="text/css" media="screen">
.stage{
width: 300px;
height: 300px;
margin:50px auto;
position: relative;
perspective: 2000px;
padding: 50px;
/*设置透视距离，才会有3D效果*/
}
.container{
position: absolute;
left: 50%;
right: 50%;/*容器位于舞台的中心*/
transform-style: preserve-3d;
/*让容器的子元素，拥有3D效果*/
width: 300px;
height: 300px;
}
.container div{
position: absolute;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
}
.item1{
z-index: 1;
opacity:0.6;
background-color: red;
}
.item2{
z-index: 2;
transform: scaleZ(5) rotateX(45deg);
background-color: blue;
}
/* .item3{
z-index: 2;
transform: scaleZ(0.25) rotateX(45deg);
background-color: yellow;
} */效果图1 scaleZ（0.25）rotateX（45deg）
效果2 scaleZ（5）rotateX（45deg）
4.透视perspective属性和perspective（）函数
对于3D变形来说，没有透视的视距，就没有3D效果。
如果没有透视的话，我们看到的就是一个平面而已。与上图不同的时，perspective的透视点在屏幕的前面。
perspective简单的来说就是镜头到屏幕的距离，镜头可以是我们的人眼。
perspective是我们人眼到屏幕的距离，perspective的值大，我们看到的物体就越小，perspective的值越小，我们看到的物体就越大。
没有设置perspective属性
设置了perspective属性 perspective:200px;
perspective是让父元素的子元素获得透视效果，而不是其本身获得透视效果。
那么perspective()函数又是干啥的呢
打个比方，有一个舞台，上面有几个人在表演，这几个人都正面面向你，但是只有你一个视点，发散出去看到不同的人，但是不是每个人看到的面积一样，有的人你能看到他的整个脸，而有的人你只能看到他的侧脸，但是他站的太偏了，或者是你坐的距离太偏了。你只能看到他的侧脸。
但是如果给每个人都加上transform:perspective(300px),你就能看到每个人的正脸。每个人都有一个视点，看上去就一样了。
下面看一个实例
<div class="stage">
<div class="container">
<div style="background-color: red"></div>
<div style="background-color: blue"></div>
<div style="background-color: yellow"></div>
<div style="background-color: green"></div>
<div style="background-color: orange"></div>
</div>
</div>
<style type="text/css" media="screen">
.stage{
perspective: 300px;
width: 900px;
height: 200px;
border:1px solid #333;
padding: 50px;
}
.container{
transform-style: preserve-3d;
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
}
.container div{
transform: rotateY(45deg);
width: 100px;
height: 100px;
}效果 舞台div.stage设置perspective:300px
去掉div.stage元素的prespective属性
.container div{
transform: rotateY(45deg) perspective(300px);
width: 100px;
height: 100px;
}
效果
5.transform-style
transform-style:flat/perserve-3d
transform-style决定让容器的子元素是否以3d的形式展现，如果不设置transform-style:perserve-3d,子元素就没有3d效果
当需要制作3d的效果时，推荐这样的书写格式
<div class="stage">
<div class="container">
<!-- wirte your code -->
</div>
</div>
<style type="text/css" media="screen">
.stage{
perspective: 500px;
/*wirte your code*/
}
.container{
transform-style: preserve-3d;
/*wirte your code*/
}6.backface-visibility 卡片翻转特效
backface-visibility用来设置元素旋转到背面时，可见或者不可见
backface-visibility:hidden/visibility
比如我们让一个图片旋转rotateY(180deg),我们希望它的背面不可见
下面给出一个实例，卡片翻转特效，当卡片翻转180deg，我们希望它的背面不可见，就可以给其图片或者放图片的容器加上这个属性
<div class="container">
<div class="wrapper">
<div class="front"><img src="正面.jpg"></div>
<div class="back"><img src="反面.jpg"></div>
</div>
</div>
<style type="text/css" media="screen">
.container{
perspective: 300px;
/*为整个舞台设置透视的视距，而这个舞台就是div.contianer,没有透视就没有3d效果*/
width: 300px;
height: 400px;
border:1px solid #333;
}
.wrapper{
width: 250px;
height: 350px;
position: relative;
left: 25px;
top:25px;
transform-style: preserve-3d;
/*为.wrapper里面的子元素在3d空间展现，否则背面的翻转效果看不出来*/
transition: transform 2s;
/*设置过渡*/
}
.front,.back{
width: 250px;
height: 350px;
position: absolute;
/*让前后两面重合*/
}
.front ,.back {
backface-visibility: hidden;
/*图片的背面不可见*/
}
/*让背面的图片成为wrapper的反面，这样当div.wrapper转过来时，就能看见背面*/
.back {
transform:rotateY(180deg);
}
/*把整个容器反转过去，前面就自然隐藏了*/
/*悬停翻转*/
.wrapper:hover{
transform: rotateY(180deg);
}
/*连续不断翻转
.wrapper{
animation: rotate 2s infinite;
}7.perspective-origin
在默认情况下perspective-origin:50% 50%；即我们看的焦点在舞台的中心，但是如果我们对中心不感兴趣，就会转移到其它的地方
下面给一个例子
浏览器兼容性很低，
目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
5484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
