前端第三弹
纸上谈来终觉浅，绝知此事要躬行
文章目录
transition过渡
- transition-property：规定设置过渡效果的css属性的名称（width、height、color等，而all表示写的所有css样式）
- transition-duration：规定完成过渡效果的时间
- transition-delay：定义过渡效果从何时开始（延迟为正数，提前为负数）
- transition-time-function：规定过渡效果的速度曲线（linear默认值匀速，可以自己设置，先快后慢等等）
注意：transition是与一般hover配合使用的，所以单纯div上设置过渡事件是没有效果，因为它需要有东西触发transition事件
针对第四个速度曲线，自己设置的话去下面网址设置好了copy到代码
https://cubic-bezier.com/#.17,.67,.83,.67
复合样式与上面顺序一样：transition：width 1s（效果时间） 2s（延迟时间） linear
我们来看一个例子：
<style>
div {
width: 100px;
height: 100px;
background-color: antiquewhite;
transition: 2s linear;
/*时间为2s，作用于全部样式，无过渡时间
匀速进行（写在div上的为图1，放在hover上的为图2*/
}
div:hover {
width: 50px;
height: 50px;
background-color: aquamarine;
}
</style>
<div></div>
<!--而如果我们直接将这一个transition放到hover里面
就会变成一旦移开就不会复原，
因为只作用在hover上，而不是div盒子上-->
transition案例
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 360px;
margin: 0 auto;
}
ul li {
width: 60px;
height: 70px;
float: left;
background: url(./aNavBg.png);
transition: 1s ease;
/* 如果为0s则就跟没有设置一样，由此我们可以看出hover的本质： */
/* hover是触碰之后产生的效果，新的东西会从上面滑下来
旧的东西从下面划走 */
}
ul li:nth-child(1) {
background-position: 0 -70px;
}
ul li:nth-child(1):hover {
background-position: 0 0;
}
ul li:nth-child(2) {
background-position: 60px -70px;
}
ul li:nth-child(2):hover {
background-position: 60px 0;
}
ul li:nth-child(3) {
background-position: 120px -70px;
}
ul li:nth-child(3):hover {
background-position: 120px 0;
}
ul li:nth-child(4) {
background-position: 180px -70px;
}
ul li:nth-child(4):hover {
background-position: 180px 0;
}
ul li:nth-child(5) {
background-position: 240px -70px;
}
ul li:nth-child(5):hover {
background-position: 240px 0;
}
ul li:nth-child(6) {
background-position: 300px -70px;
}
ul li:nth-child(6):hover {
background-position: 300px 0;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
transform变形
只对块元素有作用，内联元素没有作用
translate位移
格式：translate：位移（translateX：px，translateY：px，translateZ：px（三维，但是在网页上面看不出效果，所以写了和没写在效果上一样））
translateX：px这样子写就会只针对x轴，对y，z轴不起作用
例子1：
<div class="box">
<div id="box1"></div>
</div>
<style>
.box {
width: 200px;
height: 200px;
margin: 30px auto;
border: 1px solid red;
}
#box1 {
width: 50px;
height: 50px;
background-color: antiquewhite;
transition: 2s;
/*过渡时间，配合着使用*/
}
.box:hover #box1 {
transform: translate(100px, 0);
/*位移100px，鼠标离开box之后就会回去
时间也一样为2s，如果x，y都写了，则会斜着位移*/
}
</style>
scale缩放
值是一个比例值，正常大小为1，会以当前元素中心点进行缩放
格式 scale：（x，y，z）和上面一样，但可以只写一个值，代表x，y都缩放相同倍数
scaleX：px，只针对x轴进行缩放
例子2：
.box:hover #box1 {
transform: scale(2, 2);
}
/* 就把位移改为缩放就可以了，以元素的中心的进行缩放的*/
rotate旋转
格式：rotate：（x三维，y三维，z），代表以x，y，z轴进行旋转，单位为deg角度和rad弧度（一般不用），正值代表顺时针，负值代表逆时针，之所以x，y为三维，是因为图型以x，y轴进行旋转，这样子就会形成一个立体的模型，而以z轴进行旋转，只是一个圆
例子3：
.box:hover #box1 {
transform: rotate(-45deg);
}
/*写一个值，代表x，y，z也是旋转这个角度
但是三维的效果显示不出来，所以只能看到x，y轴旋转45度*/
skew斜切
格式：skew：（x，y），单位也为角度，正值向左倾斜，负值向右倾斜，默认值为1
例子4：
.box:hover #box1 {
transform: skew(45deg, 45deg);
}
斜切导航
<style>
a {
text-decoration: none;
color: antiquewhite;
}
div {
width: 435px;
margin: 100px auto;
overflow: hidden;
}
div a {
display: block;
float: left;
width: 100px;
color: white;
height: 30px;
line-height: 30px;
text-align: center;
transform: skewX(-30deg);
background-color: rgb(230, 138, 19);
overflow: hidden;
margin-left: 11px;
}
div a:first-child {
color: brown;
background-color: aquamarine;
padding-left: 10px;
margin-left: -10px; /* 将多出来的一部分隐藏掉 */
}
div a:last-child {
padding-right: 10px;
margin-right: -10px; /* 将多出来的一部分隐藏掉 */
}
div a span {
display: block;
transform: skewX(30deg);
/* 不加这一个会导致字体都会斜切
之所以加多一个标签就是这个原因 */
}
</style>
<div>
<a href=""><span>首页</span></a>
<a href=""><span>我的</span></a>
<a href=""><span>联系方式</span></a>
<a href=""><span>信息栏</span></a>
</div>
transform案例
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
ul {
width: 250px;
margin: 50px auto;
}
ul li {
height: 97px;
border-bottom: 1px #d0d6d9 dashed;
overflow: hidden;
/* 不设置溢出隐藏，白色框和文字还是会显示出来 */
}
ul li:last-child {
border-bottom: none;
}
ul li .pic {
margin: 10px 9px 0 0;
width: 112px;
height: 77px;
border: 1px white solid;
position: relative;
float: left;
/* 不设置浮动，后面的div标签和img（设置为块元素）
两个块元素无法在一行排列 */
}
ul li img {
width: 100%;
}
ul li div div {
color: white;
font-size: 14px;
}
ul li div .text {
/* z-index: 50; */
width: 100%;
text-align: center;
bottom: 15px;
position: absolute;
transform: translate(0, 100px);
transition: 1s;
}
ul li div .bottom {
width: 92px;
height: 57px;
border: 1px white solid;
position: absolute;
left: 9px;
top: 9px;
transform: translate(0, -60px) rotate(-90deg);
transition: 1s;
transform-origin: 0 0;
/* 0,0代表左上方
不设置这一个位移的基点，默认会在中心的
导致旋转之后白色框还是会出来 */
}
ul li .right {
float: left;
width: 114px;
font-size: 12px;
line-height: 21px;
margin-top: 10px;
}
ul li:hover .bottom {
transform: translate(0, 0) rotate(0);
}
ul li:hover .text {
transform: translate(0, 0);
}
</style>
<ul>
<li>
<div>
<div class="pic">
<img src="./1.png" alt="">
<div class="text">家庭教师</div>
<div class="bottom"></div>
</div>
</div>
<div class="right">
<p>
测试文字测试文字测试文字测试文字测试文字
</p>
</div>
</li>
<li>
<div>
<div class="pic">
<img src="./1.png" alt="">
<div class="text">家庭教师</div>
<div class="bottom"></div>
</div>
</div>
<div class="right">
<p>
测试文字测试文字测试文字测试文字测试文字
</p>
</div>
</li>
<li>
<div>
<div class="pic">
<img src="./1.png" alt="">
<div class="text">家庭教师</div>
<div class="bottom"></div>
</div>
</div>
<div class="right">
<p>
测试文字测试文字测试文字测试文字测试文字
</p>
</div>
</li>
</ul>
案例总结
transition是与hover配合使用的，所以单纯div上设置过渡事件是没有效果，
因为它需要有东西触发事件 ，这就说明了为什么我们单纯设置translate(0, 100px)没有效果
而非要触摸之后才会有效果，因为没有触发到过渡事件，所以过渡事件时间为0，就直接到了y轴100px地方
然后超出的部分被溢出隐藏掉了，只有当我们触碰的时候才会移动上来
transform注意事项
- transition是与hover配合使用的，所以单纯div上设置过渡事件是没有效果，因为它需要有东西触发事件
- 变形操作不会影响到其它元素，比如上面的父容器就没有被子容器影响到
- 变形操作只能添加给块元素，不能添加给内联元素
- transform的复合写法，可以写多个，但是执行顺序是先执行后面的操作，再执行前面的操作。
复合样式格式： transform: skew(45deg, 45deg)
translate(100px,100px);空格后再写另一个操作即可
transition会受到skew、rotate、scale的影响
transform: scale(.5) translate(100px,100px);
transform: translate(100px,100px) scale(.5);
这样子的两种设置结果，会使盒子最终处于不同的位置
因为会受到scale的影响，导致不会真的x，y轴去移动100px。
前面虽然translate虽然先执行，但是受到scale缩放一半的影响之后
就只能位移一半即50px，所以会导致两种位置完全不一样。
如果我们想要准确位移的话，可以最后再写位移比较好
-
transform-origin：基点的位置，一般默认为元素的中心的，但是可以这个属性去重新设置（x，y）坐标，以这一个点进行变形操作，注意这一个点可以再盒子的外面
可以设置九个位置的值：
水平方向 left center right 0 50% 100% 垂直方向 top center bottom -
transform-origin: center 150px;表示的意思是在原来的基点位置的x轴居中和y加上150px
在上面的例子box1中加上
transform-origin: left top; 就会以容器的最左边和最上边进行操作
例子5：
#box1 {
width: 50px;
height: 50px;
background-color: antiquewhite;
transition: 1.5s;
transform-origin: 300px 300px;
}
.box:hover #box1 {
transform: scale(.5);
}
/* 其它代码不变，我们没有设置位移，
但是由于基点在（300px，300px）的地方，
所以盒子也会跑到（300px，300px）的地方进行缩放，
并且一边移动一半缩小*/
transform如何只执行一次
例子
<div id="box">
<img src="../3d案例/img1.jpg" height="320" width="640" alt="">
<div></div>
</div>
<style>
#box {
width: 640px;
height: 320px;
position: relative;
overflow: hidden;
}
#box div {
width: 30px;
height: 200%;
position: absolute;
left: 100px;
top: -50px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
/* 从左到右，白色渐变 */
transform: translateX(-300px) rotate(30deg);
/* 设置光线的位置，倾斜30度，并且一开始不显示在盒子中 */
}
#box:hover div {
transform: translateX(600px) rotate(30deg);
transition: 1s;
}
</style>
当我们将 transition: 1s;写在div：hover上面的时候，如同上面一样，transform只会执行一次，从起点到终点，因为hover才可以触发过渡事件，从而才会有事件时间。
而当我们将 transition: 1s;写在div盒子上的时候就会执行两次，一次起点到终点，然后当你离开盒子的时候，就会从终点返回起点，再执行一次，如同下面的结果，这是因为transition只要有东西就能够触发到transition过渡事件，而不仅仅是hover触碰的时候，离开的时候也会导致过渡事件的发生，从而从终点回到原点
两次移动，才会有两道光，之前的案例transform移动之后又返回也是这一个原理
添加这一个
#box div {
transition: 1s;}
animation动画
- animation-name：设置动画的名称（自定义）
- animation-duration：动画的持续时间
- animation-delay：动画的延迟时间（为负则提前执行）
- animation-iteration-count：动画的重复次数，默认为1，infinite为无限次
- animation-timing-function：动画的运动形式，跟上面变形的运动形式是一样的参数
用到一个规则：@keyframes
默认：从开始---终止----最后会回到起始位置（默认）
from---代表0%起始 to---代表100%终止
复合样式 animation： name、duration、delay、iteration-count、timing-function；跟上面顺序一样
来看一个简单的例子：
.box {
width: 200px;
height: 200px;
margin: 30px auto;
border: 1px solid red;
}
#box1 {
width: 50px;
height: 50px;
background-color: antiquewhite;
animation: sport 2s 0.5s 3 linear;
}
@keyframes sport {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 0);
}
100% {
transform: translate(200px, 200px);
}
animation小动画
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 150px;
margin: 50px auto;
}
.box div {
float: left;
width: 50px;
height: 50px;
position: relative;
}
.box div img {
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -11px;
/* 再margin负值自己宽、高的一半，这样子就可以实现居中 */
}
/* 之所以为div:hover，因为它的区域更大，
如果img设置成块，再继承父类的宽高
也可以设置成图片hover */
.box div:hover img {
animation: up 1s;
}
@keyframes up {
0% {
transform: translate(0, 0);
opacity: 1;
}
60% {
transform: translate(0, -50px);
opacity: 0;
}
61% {
transform: translate(0, 30px);
/* 使图片从下面上来 */
}
100% {
transform: translate(0, 0);
opacity: 1;
/* 回到原来位置 */
}
}
</style>
<div class="box">
<div>
<img src="./1.png" alt="">
</div>
<div>
<img src="./2.png" alt="">
</div>
<div>
<img src="./3.png" alt="">
</div>
<!-- 之所以每个图片需要嵌套一层div是为了更好的让图片居中 -->
</div>
loading加载效果
<style>
.loading {
width: 50px;
height: 50px;
margin: 30px auto;
position: relative;
}
.loading .box1,
.loading .box2 {
width: 100%;
height: 100%;
position: absolute;
}
.loading .box2 {
transform: rotate(45deg);
}
.loading .box1 div,
.loading .box2 div {
width: 10px;
height: 10px;
background-color: antiquewhite;
border-radius: 50%;
position: absolute;
animation: loading 1.5s infinite linear;
}
.loading .box1 div:nth-child(1) {
top: 0;
left: 0;
animation-delay: 0s;
}
/* 如图1，形成八个点 */
.loading .box1 div:nth-child(2) {
top: 0;
right: 0;
animation-delay: .4s;
}
.loading .box1 div:nth-child(3) {
bottom: 0;
right: 0;
animation-delay: 0.8s;
}
.loading .box1 div:nth-child(4) {
bottom: 0;
left: 0;
animation-delay: 1.2s;
}
.loading .box2 div:nth-child(1) {
top: 0;
left: 0;
animation-delay: .2s;
}
.loading .box2 div:nth-child(2) {
top: 0;
right: 0;
animation-delay: .6s;
}
.loading .box2 div:nth-child(3) {
bottom: 0;
right: 0;
animation-delay: 1s;
}
.loading .box2 div:nth-child(4) {
bottom: 0;
left: 0;
animation-delay: 1.4s;
}
@keyframes loading {
0% {
transform: scale(1);
}
50% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
<div class="loading">
<div class="box1">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
animation动画扩展语法
- animation-fill-mode：规定动画播放之前或之后，其动画效果是否可见
none（默认值）：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟之后生效
backwards：在延迟的情况下，让0%在延迟前生效
forward：在运动结束之后，停到结束位置
both：backwards和forwards的效果都拥有
来看个小例子：
<style>
.box1, .box2, .box3, .box4{
width: 100px;
height: 100px;
margin: 5px;
background-color: antiquewhite;
}
.box1{
animation: sport 1.2s 2s;
}
.box2{
animation: sport 1.2s 2s;
animation-fill-mode: backwards;
/*有延迟的情况下，会先执行0%的效果，
如图一开始颜色就变化了*/
}
.box3{
animation: sport 1.2s 2s;
animation-fill-mode: forwards;
/*最后结束在终止位置*/
}
.box4{
animation: sport 1.2s 2s ;
animation-fill-mode: both;
/*同时拥有box2和box3的效果*/
}
@keyframes sport{
0%{transform: translate(0,0);background-color: aqua;}
100%{transform: translate(150px,0);}
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
- animation-direction：定义是否应该轮流反向播放动画
alternate：一次正向（0%~100%），一次反向（100%~0%）
reverse：永远都是反向，从100%~0%
normal（默认值）：永远都是正向，0%~100%
用法和上面的一样，效果就不展示了
css动画库
一款强大的预设css动画库，已经为我们写好了一些动画，我们可以直接调用
官网地址：https://daneden.github.io/animate.css/
进入官网之后，我们点击旁边的动画名，就可以查看动画效果，如图：
安装方法（在官网下面有教程）：
- 第一种方法（安装库文件）
Install with npm:
$ npm install animate.css --save
$ yarn add animate.css
Import it into your file:
import 'animate.css';
- 第二种方法（头文件link引入）
<head>
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
使用官网的动画的时候，注意要加上：animate__animated
官网：After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don’t forget the animate__ prefix!):
<h1 class="animate__animated animate__bounce">An animated element</h1>
我们来看一个例子：
<img src="./图片/1.jpg" class="animate__animated animate__swing animate__infinite"></img>
animate__swing 这个代表动画的名称
animate__infinite 这个代表无限次循环，如果不需要可以不加
前面两个是固定的，只有动画的名称才需要更换
3D效果
transform3D相关属性
rotateX（）：正值向上翻转，负值向下翻转
rotateY（）：正值向右翻转，负值向左翻转
translateZ（）：正值向前，负值向后
scaleZ（）：立体元素的厚度
但是这些属性在网页看不到效果，所以需要借助3D相关属性去使它们能够展示出来
3D相关属性
perspective
perspective：离屏幕多远的距离去观察元素，值越大3D的幅度就越小
perspective-origin：景深-基点位置，观察元素的角度（跟景深加的位置即可）
通过这一个景深的基点我们就可以看到下面立方体不同的面，top left就能看到上面和左边的面
来看一个例子：
<style>
.box1 {
width: 200px;
height: 200px;
margin: 50px auto;
border: 1px solid salmon;
perspective: 80px;
/* 在最外层的盒子加景深，
就可以观察到一整个嵌套盒子的变化，
值越大，幅度越小，就比如你离很远位置看风景，
树叶动没动你肯定很难看见，
距离近一点观察的会很清楚，但是太近会填满你的视觉，
不能观察完全 */
}
.box2 {
width: 50px;
height: 50px;
margin: 50px auto;
background-color: antiquewhite;
transition: 1s;
}
.box1:hover .box2 {
transform: rotateX(180deg);
}
</style>
<div class="box1">
<div class="box2"></div>
</div>
<!-- 如图，加了景深之后，可以看到一些立体的感觉-->
transform-origin
transform-origin：x y z（变形基点,以哪一个点进行变形，z轴只能写数值）
如果在不设置的情况下，元素的基点默认的是其中心位置。
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词
left,center right 是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
top center bottom 是垂直方向的取值，其中top=0%;center=50%;bottom=100%;
transform-style
transform-style：3D空间
属性值有：flat（默认值2d）、preserve-3d（产生一个三维的空间）
backface-visibility：背面隐藏
属性值有：hidden（隐藏）、visible（默认值，可见）
我们做几个小例子，更加深入理解一下：
实现立方体
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 300px;
height: 300px;
border: 2px solid salmon;
margin: 50px auto;
perspective: 200px;
}
.box ul {
width: 100px;
height: 100px;
margin: 100px;
position: relative;
transform-style: preserve-3d;
transition: 2s;
transform-origin: center center -50px;
/* 设置z轴-50px是为了盒子旋转时不要太夸张，超出盒子 */
}
.box ul li {
width: 100px;
height: 100px;
position: absolute;
line-height: 100px;
text-align: center;
color: antiquewhite;
font-size: 26px;
}
.box ul li:nth-child(1) {
background-color: aqua;
left: 0;
top: 0;
}
.box ul li:nth-child(2) {
background-color: blueviolet;
left: 100px;
top: 0;
transform-origin: left;
transform: rotateY(90deg);
}
.box ul li:nth-child(3) {
background-color: cornflowerblue;
left: -100px;
top: 0;
transform-origin: right;
transform: rotateY(-90deg);
}
.box ul li:nth-child(4) {
background-color: brown;
left: 0;
top: -100px;
transform-origin: bottom;
transform: rotateX(90deg);
}
.box ul li:nth-child(5) {
background-color: crimson;
left: 0;
top: 100px;
transform-origin: top;
transform: rotateX(-90deg);
}
.box ul li:nth-child(6) {
background-color: darkorange;
left: 0;
top: 0;
transform: translateZ(-100px) rotateY(180deg);
}
/* 使6个面通过位移、选择组成一个正方体 */
.box:hover ul {
transform: rotateY(360deg);
}
</style>
<!-- 之所以要设置多一个div盒子，是为了更好的定位，
让ul固定在盒子中心
那么li就可以通过ul的边来进行偏移，
如果不设置，那么li就会没有参照物偏移
比较不容易组成正方体，其它案例也是一样-->
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
3D写法
scale3D（）：三个值：x y z
translate3D（）：三个值 x y z
rotate3D（）：四个值 （0|1（x轴是否添加旋转角度，1为添加，0为不添加） 0|1（y轴是否添加旋转角度） 0|1（z轴是否添加旋转角度） deg（表示添加的角度）
扩展立方体
在上面的立方体上更改一下
.box ul li {
opacity: 0.5;
backface-visibility: hidden;
}
.box ul {
transform: rotate3d(1, 1, 1, -30deg);
}
.box:hover ul {
transform: rotate3d(1, 1, 1, 300deg);
}
旋转木马
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
div {
width: 600px;
height: 300px;
margin: 30px auto;
border: 1px solid saddlebrown;
perspective: 700px;
}
div ul {
width: 128px;
height: 94px;
margin: 100px auto;
transform-style: preserve-3d;
transition: 2.5s;
position: relative;
}
div ul li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
div ul li:nth-child(1) {
transform: translateZ(200px);
/* 向前靠近200px，那么景深观察到的图片就会变大
而且可以营造出一个图片在前，一个图片在后的效果 */
}
div ul li:nth-child(2) {
transform: rotateY(60deg) translateZ(200px);
}
div ul li:nth-child(3) {
transform: rotateY(120deg) translateZ(200px);
}
div ul li:nth-child(4) {
transform: rotateY(180deg) translateZ(200px);
}
div ul li:nth-child(5) {
transform: rotateY(240deg) translateZ(200px);
}
div ul li:nth-child(6) {
transform: rotateY(300deg) translateZ(200px);
}
div ul:hover {
transform: rotateY(360deg)
/* 之所以我们一直回到原点
是因为我们设置了旋转360度，而鼠标离开图片，
那么也会再一次触发，
回倒回去原点，回到原来的状态，所以一直都是回到原点*/
}
</style>
<div class="parent">
<ul>
<li><img src="./1.jpg" alt=""></li>
<li><img src="./2.jpg" alt=""></li>
<li><img src="./3.jpg" alt=""></li>
<li><img src="./4.jpg" alt=""></li>
<li><img src="./5.jpg" alt=""></li>
<li><img src="./6.jpg" alt=""></li>
</ul>
</div>
3d图片翻转
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
display: block;
}
.box {
width: 640px;
height: 320px;
margin: 50px auto;
}
.box ul {
width: 100%;
height: 100%;
position: relative;
perspective: 600px;
}
.box ul li {
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
transition: 0.5s;
}
.box ul li:first-child {
transform: rotateY(0deg);
}
.box ul:hover li:first-child {
transform: rotateY(180deg);
}
.box ul li:last-child {
transform: rotateY(-180deg);
}
.box ul:hover li:last-child {
transform: rotateY(0deg);
}
/* 触碰图片之后触发transform导致图片rotateY(0deg)，
时间为0.5s
则会产生翻转，而离开时也会触发，
transform: rotateY(180deg);
恢复原状，也是0.5s*/
</style>
<div class="box">
<ul>
<li><img src="./img1.jpg" alt=""></li>
<li><img src="./img2.jpg" alt=""></li>
</ul>
</div>
总结
-
景深一般加到父容器上面
-
transform-origin属性用于设置旋转元素的基点位置，可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center（代表我们transform变形以哪一个点进行或者边进行） -
要想实现3d效果一定要加上transform-style：3D空间，在作用的容器上加上
-
backface-visibility：背面隐藏，就是我们立方体第一个面加上透明度，后面的面还是会隐藏起来，除非旋转过来才能看到
-
transform: rotateY(360deg)的特性，为什么我们一直回到原点
是因为我们设置了旋转360度，而如果不够360度，那么倒回去原点，所以出来的效果让我们觉得一直无论怎么样都在在原点
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
