css3的2D转换和3D转换
CSS3大纲：
本次讲解css3带来了两种转换：2D转换和3D转换
1. 2D转换
转换( transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移(transform)、旋转(rotate)、缩放(scale)等效果
2D转换是改变标签在二维平面上的位置和形状的一种技术，要先学习二维坐标系。
1.1 2D转换之移动 transform
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
语法格式：
transform: translate(x,y);
/*或者分开写*/
transform: translateX(n);
transform: translateY(n);
重点：
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%);
- 对行内标签没有效果
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>2D转换之移动 transform</title><style type="text/css">* {margin: 0;padding: 0;}/*移动盒子的位置的方法： 定位 盒子的外边距 2d转换移动*/div {position: relative;width: 500px;height: 500px;background-color: pink;/*1.1x就是x轴上移动位置 y就是y轴上移动位置 中间用逗号隔开*//*transform: translate(x,y);*//*transform: translate(100px,100px);*//*1.2只移动x坐标*//*transform: translate(100px,0);*//*transform: translateX(100px);*//*1.3只移动y坐标*//*transform: translate(0,100px);*//*transform: translateY(100px);*//*3.1我们里面的参数是可以用%*//*3.2如果里面的参数是%移动的距离是 自身的宽度或高度来对比的*//*这里的50%就是 50px 因为盒子的宽度是 100px*//*transform: translateX(50%);*/}/*2.translate最大的优点:不会影响到其他元素的位置*//*div:first-child{transform: translate(30px,30px);}div:last-child {background-color: purple;}*/p {position: absolute; /*子绝父相*/top: 50%;left: 50%;width: 200px;height: 200px;background-color: purple;/*第一种方法*//*margin-top: -100px;margin-left: -100px;*//*第二种方法*//*translate(-50%,-50%) 盒子往上走自己高度的一半*/transform: translate(-50%,-50%);}span {/*translate 对于行内元素是无效的*/transform: translate(300px,300px);}</style></head><body><!--<div></div>--><!--<div></div>--><div><p></p></div><span>123</span></body>
</html>
效果一（在x、y轴上移动位置）和效果四（小盒子在大盒子水平居中）这就不展示了。
(2)translate移动不会影响到其他元素的位置
开始效果：
——>结束效果：
(3)translate:(50%,50%); 我们里面的参数是可以用%，如果里面的参数是%，那么移动的距离就是 自身的宽度或高度来对比的。
开始效果：
——>结束效果：
如何在谷歌查看鼠标移动在图片上面的样式？
进入https://chaoshi.jd.com/网页，在鼠标移动在图片上面就会向上移动的图片右击检查，然后在源代码上找到图片位置右击选择Force state，然后选择：hover，就可以查看鼠标移动在图片上面的样式。
1.2 2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
语法格式：
transform:rotate(度数)
重点：
- rotate里面跟度数，单位是deg比如rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
基础示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>2D转换之旋转rotate</title><style type="text/css">img {width: 150px;height: 150px;margin: 100px 0 0 100px;/*顺时针旋转 45度*/*transform: rotate(45deg);border-radius: 50%;border: 5px solid pink;/*谁做过渡给谁加*/transition: all .3s ;}/*当鼠标放在图片上，图片旋转一圈*/img:hover {transform: rotate(360deg);}</style></head><body><img src="img/s1.jpg" alt="" /></body>
</html>
三角形案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>三角形</title><style type="text/css">div {position: relative;width: 249px;height: 35px;border: 1px solid #000;}div::after {content: '';position:absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #000;border-bottom: 1px solid #000;transform: rotate(45deg);transition: all .3s;}/*鼠标经过div 里面的三角旋转*/div:hover::after {/*这两种方式所出的效果一样，但加上过渡transition的属性，就要考虑是逆时针还是顺时针，因为旋转的效果不一样*/*transform: rotate(225deg); /*为什么是225度旋转，而不是180度，因为原本就旋转了45度，而后又旋转180度，故而一共旋转225度*/transform: rotate(-135deg);}</style></head><body><div></div></body>
</html>
1.2.1 设置转换的中点 transform-origin
我们可以设置元素转换的中心点
语法格式：
transform-origin: x y;
重点：
- 注意后面的参数×和y用空格隔开（一般坐标的是空格隔开，其余大都是逗号隔开）
- x y默认转换的中心点是元素的中心点(50%50%)
- 还可以给xy设置像素或者方位名词( top bottom left right center )
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>设置转换的中点 transform-origin</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all .3s;/*可以跟方位名词*/transform-origin: left bottom; /*左下角*//*2.默认的是 50% 50% 等价于 center center*/transform-origin:50% 50%;/*3.可以是px 像素*/transform-origin: 20px 20px;}div:hover {transform: rotate(360deg);}</style></head><body><div></div></body>
</html>
旋转案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旋转案例</title><style type="text/css">div {overflow: hidden; /*将超出盒子外面的隐藏起来*/width: 200px;height: 200px;border: 1px solid pink;margin: 10px;float: left;}div:before {content: '黑马';display: block;width: 100%;height: 100%;background-color: hotpink;transform: rotate(180deg);transform-origin: left bottom; transition: all .4s;}/*鼠标经过div 里面的before 复原*/div:hover::before {transform: rotate(0deg);}</style></head><body><div></div><div></div><div></div></body>
</html>
1.3 2D转换之缩放scale
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法格式：
transform: scale(x,y);
注意：
- 注意其中的x和y用逗号分隔，x、y写的数字不跟单位 就是倍数的意思
- transform:scale(1,1):宽和高都放大一倍，相对于没有放
- transform:scale(2,2):宽和高都放大了2倍
- transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:scale(0.5,0.5):缩小
- sacle缩放最大的优势∶可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>2D转换之缩放scale</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;/*transform-origin: left bottom;*/}div:hover {/*1.里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2 就是2倍*//*transform: scale(x,y);*//*transform: scale(1,1);*//*transform: scale(2,2);*//*2．修改了宽度为原来的2倍 高度不变*//*transform: scale(2,1);*//*3．等比例缩放同时修改宽度和高度，我们有简单的写法﹐以下是宽度修改了2倍，高度默认和第一个参数一样*//*transform: scale(2);*//* 4．我们可以进行缩小 小于1 就是缩放*//*transform: scale(0.5,0.5);*//*transform: scale(0.5);*//*5.scale的优势之处：不会影响其他的盒子，而且可以设置缩放点*//*width: 300px;height: 300px; */ /*这样修改宽高，盒子变大时，是沿着上边框往下和两边放大的，也就是说上边框离顶部的距离是不变的。而且会影响其他的盒子*/transform: scale(2);}</style></head><body><div></div>123</body>
</html>放大图片案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图片放大案例</title><style type="text/css">div {overflow: hidden;float: left;margin: 10px;width: 200px;height: 150px; /*若不给盒子加个宽和高，图片放大的时候盒子也会有放大的效果*/}div img {transition: all .4s; /*谁做过渡给谁加*/}div img:hover {transform: scale(1.1); /*scale放大不会影响其他的盒子*/}</style></head><body><!--放大+过渡+隐藏--><div><a href="#"><img src="img/s3.jpg" alt="" /></a></div><div><a href="#"><img src="img/s2.jpg" alt="" /></a></div><div><a href="#"><img src="img/s3.jpg" alt="" /></a></div></body>
</html>
分页按钮案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>分页按钮案例</title><style type="text/css">ul li {float: left;width: 30px;height: 30px;border: 1px solid pink;text-align: center;line-height: 30px;list-style: none;margin-left: 10px;border-radius: 50%;cursor: pointer;transition: all .3s; }ul li:hover {transform: scale(1.2);}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></body>
</html>
1.4 2D转换综合写法顺序
注意：
- 同时使用多个转换，其格式为: transform: translate() rotate() scale()…等，
- 其顺序会影转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>2D转换综合写法顺序</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;transition: all .5s;}div:hover {/*transform: translate(150px,50px) rotate(180deg);*/ /*这才是我们想要的效果*//*transform: rotate(180deg) translate(150px,50px);*/ /*此方法和上面是不一样的，先写旋转后写位移 改变坐标轴方向，从而呈现的效果不是我们想要的*//*我们同时有位移和其他属性,我们需要把位移放到最前面*/transform: translate(150px,50px) rotate(180deg) scale(1.5);}</style></head><body><div></div></body>
</html>
2. css3动画
动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
制作动画分为两步:
1．先定义动画
2．再使用(调用)动画
2.1 动画的基本使用
2.1.1 用keyframes定义动画（类似定义类选择器）
语法格式：
@keyformes 动画名称 {0% {width:100px;}100% {width:200px;}
}
0%和100%有一个专用名词，叫动画序列。
动画序列：
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
- 在@keyfiames中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或用关键词"from"和"to”，等同于0%和100%。
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>动画序列</title><style type="text/css">/* 1.可以做多个状态的变化 keyformes 关键帧*//* 2.里面的百分比要是整数 */@keyframes move {0% {transform: translate(0,0);}25% {transform: translate(1000px,0);}50% {transform: translate(1000px,500px);}75% {transform: translate(0,500px);}100% {transform: translate(0,0);}}div {width: 100px;height: 100px;background-color: pink;animation-name: move;animation-duration: 8s;}</style></head><body><div></div></body>
</html>
2.1.2元素使用动画
语法格式：
div {/*调用动画*//*动画名称 move*/animation-name: move;/*持续时间 就是动画运行时间*/animation-duration:2s;
}
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*我们想要页面一打开，一个盒子就从左边走到右边*//*1.定义动画*/@keyframes move{/*开始状态*/0% {transform: translateX(0px);}/*结束状态*/100% {transform: translateX(1000px);}}/*使用动画*/div {width: 200px;height: 200px;background-color: pink;/*元素调用动画*//*动画名称 move*/animation-name: move;/*持续时间 就是动画运行持续时间*/animation-duration: 2s;}</style></head><body><div></div></body>
</html>
2.1.3 动画常用属性
| 属性 | 描述 |
|---|---|
| @keyformes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性。 |
| animation-name | 规定@keyframes动画的名称。(必须的) |
| animation-duration | 规定动画完成—个周期所花费的秒或毫秒,默认是0。（必须的) |
| animation-timing-function | 规定动画的速度曲线,默认是“ease”. |
| animation-delay | 规定动画何时开始，默认是0。 |
| animation-iteration-count | 规定动画被播放的次数,默认是1，还有infinite(无限的、循环的) |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal ",alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是"running",还有"paused"。 |
| animation-fill-mode | 规定动画结束后状态,保持forwards回到起始backwards |
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>动画常用属性</title><style type="text/css">@keyframes move{0% {transform: translate(0,0);}100% {transform: translate(1000px,0);}}div {width: 100px;height: 100px;background-color: pink;/*动画时间*/animation-name: move;/*持续时间*/animation-duration: 2s;/*运动曲线*/animation-timing-function: ease;/*何时开始*/animation-delay: 1s;/*重复次数 iteration 重复的 count 次数 infinite无限*//*animation-iteration-count: infinite;*//*是否反方向播放 默认的normal 如果想要反方向 就写alternate 逆向*//*animation-direction: alternate;*//*动画结束后的状态 默认的是backwords 回到起始状态 我们可以让他停留在结束状态 forwords*/animation-fill-mode: forwards;}div:hover {/*鼠标经过div 让这个div 停止动画， 鼠标离开就继续动画*/animation-play-state: paused;}</style></head><body><div></div></body>
</html>
动画简写属性格式
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
简单示例：
/*animation: name duration timing-function delay iteration-count direction fill-mode;*//*去前面两个属性 name duration一定要写 默认的你不用改的可以不用写*/animation: move 2s linear 0s 2 alternate forwards ;
放置顺序也是有点讲究的，比如：持续时间肯定要放在何时开始时间前面
- 简写属性里面不包含animation-play-state
- 暂停动画: animation-play-state: puased;经常和鼠标经过等其他配合使用
- 想要动画走回来,而不是直接跳回来:animation-direction : alternate
- 盒子动画结束后，停在结束位置:animation-fill-mode : forwards
热点图案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>大数据热点图</title><style type="text/css">body {background-color: #333;}.map {position: relative;width: 747px;height: 617px;background: url(img/map.png);margin: 0 auto;}.city {position: absolute;top: 227px;right: 193px;color: #fff;}.tb {top: 505px;right: 75px;}.gz {top: 534px;right: 185px;}.dotted {width: 8px;height: 8px;background-color: #09f;border-radius: 50%;}.city div[class^="pulse"] {/*保证我们小波纹在父盒子里面水平居中 放大之后就会中心向四周发散*/position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 8px;height: 8px;border-radius: 50%;box-shadow: 0 0 12px #009dfd; /*水平 垂直 阴影 颜色*/animation: pulse 1.5s linear infinite;}.city div.pulse2 {animation-delay: 0.5s;}.city div.pulse3 {animation-delay: 1s;}@keyframes pulse{0{}70%{ /*缩放为什么不用scale， 因为scale在缩放的过程中不仅会把文本放大，还会把阴影放大 就会达不到想要的效果*//*transform: scale(3);*/width: 40px;height: 40px;opacity: 1; /*透明度*/}100% {width: 70px;height: 70px;opacity: 0; /*透明度为1则是不透明*/}}</style></head><body><div class="map"><div class="city"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="city tb"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="city gz"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div></body>
</html>
效果如图：;
解决后如图：
（2）
在三个盒子的公共css样式里写了基本样式，给pulse2写了延迟0.4秒，pulse3盒子写了延迟0.8秒，却没有出现想要的效果。
原因：权重不够覆盖原来的属性
解决方案：增加权重
（3）疑问？？为什么不用scale进行缩放？
解答：因为scale在缩放的过程中不仅会把元素放大，还会把阴影放大 就会达不到想要的效果
2.1.4 速度曲线细节 （详细讲解细节）
animation-timing-function:规定动画的速度曲线，默认是“ease"
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的。匀速 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| steps | 指定了时间函数中的间隔数量(步长) |
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>steps</title><style type="text/css">div {font-size: 20px;width: 0;height: 30px;background-color: pink;overflow: hidden;/*让我们的文字强制一行内展示*/*white-space: nowrap; /*若不写这个属性，当文本出现逗号就会可能出错，当文本为英文时，则会出错*/ /*steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear*/animation: w 4s steps(10) forwards; /*加forwards是为了能在动画结束时不往回跳*/}@keyframes w{0%{width: 0px; }100%{width: 200px;}}</style></head><body><div>世纪佳缘我在这里等你</div><!--<div>asd，asd，asd，asd，</div>--></body>
</html>
奔跑的熊大案例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>奔跑的熊大</title><style type="text/css">body {background-color: #ccc;}div {position: absolute;width: 200px;height: 100px;background: url(img/bear.png) no-repeat;/*我们元素可以添加多个动画，用逗号分隔*/animation: bear 1s steps(8) infinite,move 4s forwards;}@keyframes bear{0%{background-position:0,0;}100%{background-position: -1600px,0 ;/*background-position 属性设置背景图像的起始位置*/}}@keyframes move{0%{left: 0;}100%{left: 50%;transform: translateX(-50%);}}</style></head><body><div></div></body>
</html>
background-position 属性设置背景图像的起始位置。
2.1.5 如何扒网站图片
此处京东网站示例：
进入京东网站，按F12或者右击选择检查，然后找到Sources，选择点击以img开头的即可进行找图片，选中想要的图片，点击那个链接，选择Open in new tab，最后右击选择图片另存为进行保存即可。
3. 3D转换
3.3.1 三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
- x轴:水平向右 注意:×右边是正值，左边是负值
- y轴:垂直向下 注意:y下面是正值，上面是负值
- z轴:垂直屏幕 注意:往外面是正值，往里面是负值
3.3.2 3D移动 translate3d
语法格式：
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
transform: translate3d(x,y,z);
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div {width: 100px;height: 100px;background-color: pink;/*transform: translateX(100px);transform: translateY(100px);transform: translateZ(100px) ;*/transform: translateX(100px) translateY(100px) translateZ(100px);/*1.translateZ 沿着Z轴移动*//*2.translateZ 后面的单位我们一般跟px*//*3.translateZ(100px) 向外移动100px （向我们的眼睛来移动的）*//*4.3D移动有简写的方法*//*transform: translate3d(x,y,z);*/transform: translate3d(100px,100px,100px);/*xyz是不能省略的，如果没有就写0*/transform: translate3d(0,100px,100px);}</style></head><body><div></div></body>
</html>
3.3.3 透视 perspective
-
透视写在被观察元素的父盒子上面的
-
透视的单位是像素（当数值为正数，透视的值越大，看到的物体越小）
-
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
-
z∶就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
语法格式：
perspective: 200px;
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body {/*透视写在被观察的元素的父盒子上面*/perspective: 200px;}div {width: 100px;height: 100px;background-color: pink;transform: translate3d(400px,100px,100px);}</style></head><body><div></div></body>
</html>
translateZ()基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body {/*透视写在被观察的元素的父盒子上面*/perspective: 200px;}div {width: 100px;height: 100px;background-color: pink;margin: 100px auto;transform:translateZ(100px);}</style></head><body><div></div></body>
</html>3.3.4 3D旋转 rotate3d
3.3.4.1 3D旋转rotareX
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法格式：
transform:rotateX(45deg):沿着x轴正方向旋转45度transform:rotateY(45deg):沿着y轴正方向旋转45degtransform:rotateZ(45deg):沿着Z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可)
左手准则
rotateX
左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
rotateY
左手的手拇指指向y轴的正方向
其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kkgqE9WH-1629336676382)(C:Users29285AppDataRoamingTyporatypora-user-imagesimage-20210428105014008.png)]
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body {perspective: 500px;}img {display: block;margin: 100px auto;transition: all .3s;}img:hover {*transform: rotateX(180deg);*transform: rotateY(180deg);*transform: rotateZ(180deg);/*transform: rotate3d(x,y,z,deg);*/*transform: rotate3d(1,0,0,45deg); /*沿x轴旋转45度*/*transform: rotate3d(0,1,0,45deg);transform: rotate3d(1,1,0,45deg); /*沿对角线旋转45度*/}</style></head><body><header class="header w"><div><img src="img/pig.jpg"/></div></header></body>
</html>
3.3.5 3D呈现transfrom-style
- 控制子元素是否开启三维立体环境
- transform-style:flat子元素不开启3d立体空间默认的
- transform-style: preserve-3d;子元素开启立体空间代码写给父级，但是影响的是子盒子
- 这个属性很重要，后面必用
基本示例：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body {/*为什么是给body加透视，而不是给box盒子加，因为box盒子也要做3d旋转，故而加在body上*/perspective: 500px;}.box {position: relative;width: 200px;height: 200px;margin: 100px auto;transition: all 2s; /*让子元素保持3d立体环境*/ /*这个只能给父盒子加，不能加到body*/transform-style: preserve-3d;}.box:hover {transform: rotateY(60deg);}div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;}.box div:last-child {background-color: purple;transform: rotateX(60deg);}</style></head><body><div class="box"><div></div><div></div></div></body>
</html>
效果展示：
3.3.6 3D转换
两面翻转盒子案例：
1.搭建HTML结构
box是翻转盒子 front是前面的盒子 back是后面的盒子
2.CSS样式
box指定大小，切记要添加3d呈现
back盒子要沿着Y轴翻转180度
最后鼠标经过box沿着Y旋转180deg
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>两面翻转盒子</title><style type="text/css">body {perspective: 400px; /*加透视让其更有立体感*/}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all 0.4s; /*让后面的紫色的盒子保留3d立体空间*/transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;top:0;left: 0;width: 100%;height: 100%;border-radius: 50%;font-size: 30px;color: #fff;text-align: center;line-height: 300px;}.front {background-color: pink;z-index: 1;}.back {background-color: purple;/*像手机一样 背靠背 旋转*/transform: rotateY(180deg);}</style></head><body><div class="box"><div class="front">pink</div><div class="back">老师</div></div></body>
</html>
效果展现：
3D导航栏案例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>3D导航栏</title><style type="text/css">ul {margin: 100px;}ul li {float: left;margin: 0 5px;list-style: none;width: 120px;height: 35px;/*为什么是给小li添加透视？因为一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果*/perspective: 350px; }.box {position: relative;width: 100%;height: 100%;transition: all .4s; transform-style: preserve-3d;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;left: 0;top: 0;width: 100%;height: 100%;font-size: 20px;color: #fff;text-align: center;line-height: 35px;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: purple;transform: translateY(17.5px) rotateX(-90deg);}</style></head><body><ul><li><div class="box"><div class="front">pink</div><div class="bottom">老师</div></div></li><li><div class="box"><div class="front">pink</div><div class="bottom">老师</div></div></li></ul></body>
</html>
如何将
中的紫色盒子移动到底端？
设置位移沿y轴向下移动相应的距离即可解决。
旋转木马案例
此案例需要注意盒子是先旋转后移动
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>旋转木马</title><style type="text/css">body {perspective: 1000px;}section {position: relative;width: 300px;height: 200px;margin: 250px auto;transform-style: preserve-3d;/*添加动画效果*/animation: rotate 10s linear infinite;background: url(img/pig.jpg) no-repeat;}section:hover {/*鼠标放入section停止动画*/animation-play-state: paused;}@keyframes rotate{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}}section div {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(img/dog.jpg);}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {/*先旋转好了 再移动距离*/transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {/*先旋转好了 再移动距离*/transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {/*先旋转好了 再移动距离*/transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {/*先旋转好了 再移动距离*/transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {/*先旋转好了 再移动距离*/transform: rotateY(300deg) translateZ(300px);}</style></head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section></body>
</html>
为什么第一张图片沿Z轴移动300px，还是会被其他图片压在下面？？
因为用定位都压在一起了，第一个盒子被压在最下面，所以被挡住了，但是不用紧
3.3.7. 浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
私有前缀
- -moz-:代表firefox浏览器私有属性·
- -ms-:代表ie浏览器私有属性
- -webkit-:代表safari、chrome私有属性
- -o-∶代表Opera私有属性
提倡的写法：
-moz-border-radius:10px
-webkit-border-radius: 10px;
-o-border-radius: 10px; /*可写可不写*/
/*把私有前缀全部写完后在下面加一个没有加私有前缀就好了*/
border-radius: 10px;