在css3 中，有一个转换效果，也可以替代js,并且比 js 做得好，那就是转换，即transform 属性，只需要个这个属性加上值，就可以实现转化效果了;有三种值，平移（translate），旋转(rotate)*和缩放(scale);
1. transform:translate
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 ????<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 ????<title>Document</title> 8 ????<style> 9 ????????div.nei {10 ????????????width: 200px;11 ????????????height: 200px;12 ????????????margin: 100px auto 0;13 ????????????background: red;14 ????????}15 ????????div.canzhao {16 ????????????margin-top: 10px;17 ????????????text-align: center;18 ????????}19 ????</style>20 </head>21 <body>22 ????<div class="abox">23 ????????<div class="nei"></div>24 ????????<div class="canzhao">这里是中间参照</div>25 ????</div>26 </body>27 </html>初始状态：
加上transform:translate(-100px,0) 之后;
1 ?div.nei { 2 ????????????width: 200px; 3 ????????????height: 200px; 4 ????????????margin: 100px auto 0; 5 ????????????background: red; 6 ????????} 7 ????????div.canzhao { 8 ????????????margin-top: 10px; 9 ????????????text-align: center;10 ????????}11 ????????div.abox:hover .nei {12 ????????????transform: translate(-100px, 0);13 ????????}运行结果：向左移动了100px
这里 translate(-100x,0)；第一个参数代表x 轴，第二个参数代表y轴
一般情况下，转换配合着过渡的话，效果会更好，如下，加入过渡：
1 ?div.nei { 2 ????????????width: 200px; 3 ????????????height: 200px; 4 ????????????margin: 100px auto 0; 5 ????????????background: red; 6 ????????????/* /////加入过渡 */ 7 ????????????transition: all 2s; 8 ????????} 9 ????????div.canzhao {10 ????????????margin-top: 10px;11 ????????????text-align: center;12 ????????}13 ????????div.abox:hover .nei {14 ????????????transform: translate(-100px);15 ????????}2. transform:rotate();
1 ?div.nei { 2 ????????????width: 200px; 3 ????????????height: 200px; 4 ????????????margin: 100px auto 0; 5 ????????????background: red; 6 ????????????/* /////加入过渡 */ 7 ????????????transition: all 2s; 8 ????????} 9 ????????div.canzhao {10 ????????????margin-top: 10px;11 ????????????text-align: center;12 ????????}13 ????????div.abox:hover .nei {14 ????????????/* transform: translate(-100px); */15 ????????????transform: rotate(35deg);16 ????????}运行结果：围绕中心点进行旋转
3.transform:scale();
1 ?div.nei { 2 ????????????width: 200px; 3 ????????????height: 200px; 4 ????????????margin: 100px auto 0; 5 ????????????background: red; 6 ????????????/* /////加入过渡 */ 7 ????????????transition: all 2s; 8 ????????} 9 ????????div.canzhao {10 ????????????margin-top: 10px;11 ????????????text-align: center;12 ????????}13 ????????div.abox:hover .nei {14 ????????????/* transform: translate(-100px); */15 ????????????/* transform: rotate(35deg); */16 ????????????transform: scale(1.5, 1);17 ????????}设置缩放：scale(1.5,0),第一个参数为x轴，第二个参数为y轴，运行结果：
如果只是需要x轴或者y 轴进行缩放的话，可以改成 transform:scaleX(1.5),或者缩放y轴 transform:scale(1.0);
如果平移，缩放，旋转都需要同时进行的话，可以写在一起，用空格隔开即可
1 ??div.nei { 2 ????????????width: 200px; 3 ????????????height: 200px; 4 ????????????margin: 100px auto 0; 5 ????????????background: red; 6 ????????????/* /////加入过渡 */ 7 ????????????transition: all 2s; 8 ????????} 9 ????????div.canzhao {10 ????????????margin-top: 10px;11 ????????????text-align: center;12 ????????}13 ????????div.abox:hover .nei {14 ????????????/* transform: translate(-100px); */15 ????????????/* transform: rotate(35deg); */16 ????????????/* transform: scale(1.5, 1); */17 ????????????transform: translate(-100px) rotate(35deg) scale(1.5, 1);18 ????????}运行结果：
注意：当使用旋转时，会改变元素的坐标系
另外：在转换变化中，还有一个属性，就是transform-origin ，通过这个属性，可以设置转换的参照点，yinwei默认清空下，是参照元素的中心点进行的
1 ?div.nei { 2 ????????????width: 200px; 3 ????????????height: 200px; 4 ????????????margin: 100px auto 0; 5 ????????????background: red; 6 ????????????/* /////加入过渡 */ 7 ????????????transition: all 2s; 8 ?9 ????????}10 11 ????????div.canzhao {12 ????????????margin-top: 10px;13 ????????????text-align: center;14 ????????}15 16 ????????div.abox:hover .nei {17 ????????????/* transform: translate(-100px); */18 ????????????transform: rotate(35deg);19 ????????????/* ////设置参照点 参照左上角进行*/20 ????????????transform-origin: 0px 0px;21 ????????????/* transform: scale(1.5, 1); */22 ????????????/* transform: translate(-100px) rotate(35deg) scale(1.5, 1); */23 ????????}运行结果：
这里 transform-origin:0px 0px; 第一个数x轴的位置，第二个是y 轴的位置，使用空格隔开两个参数；另外接受百分比作为参数，也接受名称定位作为参数（如 left center right top bottom）;
默认情况下，在旋转时，是围绕z 轴在进行旋转
如果想要看到围绕x 轴或者围绕y 轴旋转的效果，需要在旋转目标的上级元素上加入一个 perspective 属性；这样，会让人看到近大远小的效果
1 ?div.nei { 2 ????????????width: 200px; 3 ????????????height: 200px; 4 ????????????margin: 100px auto 0; 5 ????????????background: red; 6 ????????????/* /////加入过渡 */ 7 ????????????transition: all 2s; 8 ????????} 9 ????????div.canzhao {10 ????????????margin-top: 10px;11 ????????????text-align: center;12 ????????}13 ????????div.abox {14 ????????????perspective: 300px;15 ????????}16 ????????div.abox:hover .nei {17 ????????????/* transform: translate(-100px); */18 ????????????transform: rotateX(35deg);19 ????????????/* ////设置参照点 参照左上角进行*/20 ????????????transform-origin: 0px 0px;21 ????????????/* transform: scale(1.5, 1); */22 ????????????/* transform: translate(-100px) rotate(35deg) scale(1.5, 1); */23 ????????}运行结果:
这里：perspective:300px；
300px 表示距离元素300px 在观察，距离越近，效果越明显，距离越远，效果越不明显
默认情况下，perspective 属性加在转换元素的直接父级元素上
css 效果之转换
原文地址：https://www.cnblogs.com/huanying2015/p/9942968.html