<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.rotateX{width:300px;height:226px;margin:200pxauto;/* 透视 :加给变换的父盒子*//* 设置的是用户的眼睛距离 平面的距离*//* 透视效果只是视觉上的呈现，并不是正真的3d*/perspective:110px;}
img {/* 过渡*/transition: transform 2s;}/* 所有的3d旋转，对着正方向去看，都是顺时针旋转*/.rotateX:hover img {transform: rotateX(360deg);}</style>
</head>
<body>
<div>
<img src="https://www.linuxidc.com/images/x.jpg" alt=""/>
</div>
</body>
</html>
效果：
上方代码中，我们最好加个透视的属性，方能看到3D的效果；没有这个属性的话，图片旋转的时候，像是压瘪了一样。
而且，透视的是要加给图片的父元素 div，方能生效。我们在后面会讲解透视属性。
（2）rotateY 举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.rotateY{width:237px;height:300px;margin:100pxauto;/* 透视 */perspective:150px;}
img {transition: all 2s;/* 过渡 */}.rotateY:hover img {transform: rotateY(360deg);}</style>
</head>
<body>
<div>
<img src="https://www.linuxidc.com/images/y.jpg" alt=""/>
</div>
</body>
</html>
效果：
（3）rotateZ 举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.rotateZ{width:330px;height:227px;margin:100pxauto;/* 透视*/perspective:200px;}
img {transition: all 1s;}.rotateZ:hover img {transform: rotateZ(360deg);}</style>
</head>
<body>
<div>
<img src="https://www.linuxidc.com/images/z.jpg" alt=""/>
</div>
</body>
</html>
效果：
案例：百度钱包
现在有下面这张图片素材：
要求做成下面这种效果：
上面这张图片素材其实用的是精灵图。实现的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {background-color: cornflowerblue;}.box{width:300px;height:300px;/*border: 1px solid #000;*/margin:50pxauto;position:relative;}.box > div {width:100%;height:100%;position:absolute;/*border: 1px solid #000;*/border-radius:50%;transition: all 2s;backface-visibility:hidden;}.box1{background:url(images/bg.png)left0no-repeat;/*默认显示图片的左半边*/}.box2{background:url(images/bg.png)right0no-repeat;transform: rotateY(180deg);/*让图片的右半边默认时，旋转180度，就可以暂时隐藏起来*/}.box:hover.box1{transform: rotateY(180deg);/*让图片的左半边转消失*/}.box:hover.box2{transform: rotateY(0deg);/*让图片的左半边转出现*/}</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>
格式：
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
格式举例：
（1）translateX 举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:200px;height:200px;background:green;transition: all 1s;}.box:hover{transform: translateX(100px);}</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果：
（2）translateY 举例：