2D转换
在二维的平面上做一些变化，使用transform属性
1. 2D转换之移动（translate）
案例：
div{ width: 200px; height: 200px; background-color: #090; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);/*左-上 移动自身50%*/ }
2. 2D转换之旋转（rotate）
默认情况下按中心点旋转，我们可以通过transform-origin调中心点。
div{ width: 200px; height: 200px; background-color: #090; margin: 100px auto; transform-origin: top left;/*旋转的中心点，默认不写该属性是以矩形中心点旋转*/ } div:hover{ transform: rotate(45deg)/*deg表示度数*/ }
3. 2D转换之缩放（scale）
div{ width: 200px; height: 200px; background-color: #090; margin: 100px auto; } div:hover{ /*transform: scale(0.5);*/ /*x轴和Y轴都是缩放0.5倍*/ /*transform: scaleX(0.5);*/ /*x轴缩放0.5倍*/ transform: scale(2,3); /*x轴缩放2倍 y轴缩放3倍*/ }
4. 2D转换之斜切（skew）
div{ width: 200px; height: 200px; background-color: #090; margin: 100px auto; } div:hover{ /*transform: skewX(8deg);*/ /*x方向上斜切8度*/ transform: skewY(8deg); /*y方向上斜切8度*/ }
1. 转换案例：
下箭头制作
1 div{ 2 width: 300px; 3 height: 40px; 4 border: #5c5c5c solid 1px; 5 margin: 100px auto; 6 position: relative; 7 } 8 div::after{ 9 content: ''; 10 width: 12px; 11 height: 12px; 12 border-right: #5c5c5c solid 2px; 13 border-bottom: #5c5c5c solid 2px; 14 display: block; 15 position: absolute; 16 top: 50%; /*子盒子左上角相对于有定位的父盒子居中显示*/ 17 right: 12px; 18 transform: translateY(-50%) rotate(45deg); /*translateY(-50%)与top:50% 组合使用让子盒子相对父盒子垂直居中*/ 19 } 20 div:hover{ 21 border: #009 solid 1px; 22 } 23 div:hover::after{ 24 border-right: #009 solid 2px; 25 border-bottom: #009 solid 2px; 26 }
动画过渡（transition）
动漫过渡类型：
案例：
没有给transition瞬间变化 ↓ ↓
div{ width: 200px; height: 100px; border: #00f solid 3px; background-color: #f90; margin: 100px auto; border-radius: 15px; } div:hover{ width: 300px; height: 200px; background-color: #f30; }
1. 过渡的小案例：
div{ width: 200px; height: 100px; border: #00f solid 3px; background-color: #f90; margin: 100px auto; border-radius: 15px; /*transition: width 0.5s ease 0s;*/ /* 设置参与过渡的属性 过渡时间 过渡的动画类型 延迟过渡的时间 */ /*transition: all 0.5s ease 1s;*/ /* 默认用all参与 ... 延迟时间【进入和退出动画都延迟2秒】 */ transition: all 0.5s; } div:hover{ width: 300px; height: 200px; background-color: #f30; }
2. 头像旋转小案例：
img{ border: #093 solid 4px; display: block; margin: 100px auto; border-radius: 50%; width: 300px; height: 300px; transition: all 1s; } img:hover{ transform: rotate(360deg); }
3. 鼠标移动到图片上图片变大（模仿公开课网站的效果）
div{ width: 300px; height: 300px; border: #ccc solid 1px; margin: 100px auto; overflow: hidden; } div img{ width: 300px; height: 300px; transition: all 0.5s ease 0s; } div img:hover{ transform: scale(1.1); }
4. 案例：抽奖的功能：
效果图 （素材可下载） |
背景 |
转盘 |
指针 |
HTML代码：
<div id="content"> <div id="zhuan"></div> <img src="pointer.png" alt=""> </div>
css代码：
#content { width: 698px; height: 674px; background: url('turntable-bg.jpg') no-repeat; margin: auto; overflow: hidden; position: relative; } #content #zhuan { width: 478px; height: 478px; background: url('turntable.png') no-repeat; margin: 97px 0 0 110px; transition: all 3s ease 0s; } #content img { position: absolute; left: 275px; top: 219px; }
JavaScript代码：
1 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 2 <script> 3 $(document).ready(function (e) { 4 $('#content img').click(function (e) { 5 var num = Math.floor(Math.random() * 3600); //求的旋转的随机数 6 $('#zhuan').css('transform', 'rotate(' + num + 'deg)');//实际看到图片的旋转度数并没有在原来旋转的基础上累加，而是基于原来图片0度时的位置设置样式，图片不管在哪个位置都会以顺时针或逆时针旋转回基于原来0度+rotate(度) 7 num %= 360; //num = num % 360 8 setTimeout(function () { 9 if (num <= 60) { 10 alert('谢谢参与'); 11 } else if (num <= 60*2) { 12 alert('三等奖'); 13 } else if (num <= 60*3) { 14 alert('谢谢参与'); 15 } else if (num <= 60*4) { 16 alert('二等奖'); 17 } else if (num <= 60*5) { 18 alert('谢谢参与'); 19 } else if(num < 60*6){ 20 alert('一等奖'); 21 } 22 }, 3000); 23 }); 24 }); 25 </script>
3D转换
1. 3D转换之X轴旋转
※ X轴旋转就像单杠旋转
案例：
|
div{ width: 200px; height: 200px; margin: 100px auto; border: #000 solid 1px; } div img:hover{ transform: rotateX(60deg);/*x轴旋转60度*/ } |
☞ transform: rotateX(60deg)在二维平面，没有立体感。想让它有立体感需要添加透视功能（）
|
透视点（延长会有一个相交点）-- 灭点 |
|
div{ width: 200px; height: 200px; margin: 100px auto; border: #000 solid 1px; perspective: 400px; /*透视效果，这个元素必须给父元素添加*/ } div img:hover{ transform: rotateX(60deg);/*x轴旋转60度*/ } |
默认情况以中线在旋转，添加transform-origin: bottom以底边为原点
|
div{ width: 200px; height: 200px; margin: 100px auto; border: #000 solid 1px; perspective: 400px; /*透视效果，这个元素必须给父元素添加*/ } div img{ transform-origin: bottom; transition: all 0.5s; } div img:hover{ transform: rotateX(60deg);/*x轴旋转60度*/ } |
案例：打开的盒子
|
#content{ width: 300px; height: 300px; margin: 100px auto; position: relative; } #content #face1, #content #face2{ width: 300px; height: 300px; border-radius: 50%; background: url('turntable-bg.jpg') no-repeat; border: #666 solid 1px; position: absolute; left: 0; top: 0; } #content #face2{ background: url('turntable.png') no-repeat; transform-origin: bottom; transition: all 2s; } #content:hover #face2{ transform: rotateX(180deg); } |
2. 3D转换之X轴旋转
※ Y轴旋转就像钢管舞，沿着y轴方向旋转
|
1 #content{ 2 width: 300px; 3 height: 300px; 4 border: #666 solid 1px; 5 margin: 100px auto; 6 position: relative; 7 perspective: 800px; /*如需透视效果景深，这个元素必须给父元素添加*/ 8 } 9 #content #face1, 10 #content #face2{ 11 width: 300px; 12 height: 300px; 13 border-radius: 50%; 14 background: url('yingbi.png') no-repeat; 15 position: absolute; 16 backface-visibility: hidden; /*转过去以后隐藏*/ 17 transition: all 3s; 18 } 19 #content #face1{ 20 background-position: -4px -3px; 21 z-index: 1; 22 } 23 #content #face2{ 24 background-position: -358px -3px; 25 transform: rotateY(-180deg); /*face2在背面处于-180度的状态*/ 26 /* z-index: 0; */ 27 } 28 #content:hover #face1{ 29 transform: rotateY(-180deg); 30 /* z-index: 0; */ /*旋转过后置于底部 有了backface-visibility: hidden可不添加*/ 31 } 32 #content:hover #face2{ 33 transform: rotateY(0deg); 34 /* z-index: 1; */ /*旋转过后置于顶部 */ 35 } |
| 素材可下载 |  |
face2在背面处于-180度的状态