仅供学习，转载请注明出处
CSS3 transform变换
1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
上面的参数有很多，逐个来演示看看。
translate(x,y) 设置盒子位移
下面先写一个div，然后再写位移的效果。
下面写一个位移的效果，如下：
虽然只写一个 :hover 伪类事件的时候，也可以实现，但是也是不好的，最好再写一个变化之前的状态，然后再加一个动画效果，那么体验才好。
translateX、translateY、translateZ 设置三维移动
其实这三个参数就是单独设置上面的translate参数。那么下面来单独看看，如下：
如果单独设置Z轴移动，这样是完全看不出效果的。
需要设置perspective(设置透视距离) 才能看出正方形有种缩放的效果，其实就是越远，图案看起来越小的效果。
scale(x,y) 设置盒子缩放
首先看看原来div的大小，如下：
设置y轴放大2倍，效果如下：
那么如果，同时设置x轴缩小到0.5倍呢，效果如下：
rotate(deg) 设置盒子旋转
演示这个旋转，我画两个div，一个不变作为参照，另一个旋转看看。
可以看出，这是顺时针选择45度的效果。
其实，这个选择还可以结合另一个参数使用。就是设置旋转的中心点。
tranform-origin 设置变形的中心点
首先设置旋转的中心点在左边的中间点，如下：
再试试，右上角来看看，如下：
还可以使用像素定位的方式来确定中心点，如下：
skew(x-angle,y-angle) 设置盒子斜切
二话不说，直接上效果，如下：
rotateX、rotateY、rotateZ 设置三维旋转
简单看看Y轴的旋转效果，如下：
如果没有设置透视距离perspective，那么就只能看出一个变窄的效果。下面来增加透视距离来看看。
增加了透视距离之后，就可以看到两边距离长短不一的效果。
举例：（翻面效果）
首先准备一个图片
location_bg.jpg
实现效果如下：
好了，看完了效果，当然就要开始来逐步实现这个效果了。
首先编写div下有一张图片的效果
编写一个三维翻转180度的效果
可以看到，在翻转的时候，两边的长度一样，看不出远近的效果，此时就要增加透视距离了。
取消背景色，增加设置透视距离
此时可以看到比较好的翻转效果了。
那么下面就要设置图片翻转之后的背面效果了。
此时需要使用这个参数backface-visibility 设置盒子背面是否可见。
处理思路：首先设置图片备面不可见，然后再创建显示第二个div。
backface-visibility 设置盒子背面不可见
好了，那么怎么编写第二个div呈现到图片背后呢？
其实可以一开始就将这个新的div翻转180度，并设置不可见，然后跟着图片翻转显示，最后绝对定位重叠一起，就可以实现啦。
说那么多，来实现一下。
编写图片背后的div
好，有了这个图片说明的div，先不设置背景隐藏，做一个翻转动画先。
编写图片说明div的翻转效果
重叠两个div在中间
好了，两个div重叠在一起了，那么将上面的图片说明设置背景为隐藏即可。
设置背景图文说明隐藏
鼠标移动上去看看效果。
好了，最后规范一下，设置父元素下的子元素以3D显示。
设置父元素下的子元素以3D显示
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outside{
width: 700px;
height: 272px;
/*background-color: gold;*/
margin:50px auto;
border: 2px solid #000;
position: relative;
/* 让容器里面的元素按照3d空间显示（规范写法） */
transform-style:preserve-3d;
}
.outside img{
transform: perspective(800px) rotateY(0deg);
transition: all 2s ease;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 200px;
}
.outside:hover img{
transform: perspective(800px) rotateY(180deg);
}
.outside .back{
width: 300px;
height: 272px;
background-color: pink;
position: absolute;
top: 0px;
left: 200px;
font-size: 20px;
text-align: center;
line-height: 272px;
transform: perspective(800px) rotateY(180deg);
transition: all 2s ease;
backface-visibility: hidden;
}
.outside:hover .back{
transform: perspective(800px) rotateY(360deg);
}
</style>
</head>
<body>
<div class="outside">
<img src="./images/location_bg.jpg" alt="">
<div class="back">
图片文字说明
</div>
</div>
</body>
</html>
微信公众号
