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>

效果如图：![在这里插入图片描述](https://img-blog.csdnimg.cn/b7ee5b9835b94e7aba6bb438c5e69d0a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqNjI0,size_16,color_FFFFFF,t_70#pic_center

出现的一些问题：

（1）

阴影部分这么高，是因为三个盒子叠加在一起了，实际上应该要这三个盒子摞在一起，压住那个蓝色的小圆点盒子就好了，沿着点向四周发散

解决方法：给这三个盒子加定位，使阴影在盒子里面水平居中，添加如下属性属性值。即可解决。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

解决后如图：
（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:\Users\29285\AppData\Roaming\Typora\typora-user-images\image-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;