专项：渐变、过渡、动画效果
渐变
线性渐变
渐变，默认从上到下的渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 300px; height: 300px; border: 10px solid turquoise; /* 支持多个颜色渐变 */ background: linear-gradient(aqua, aquamarine, turquoise); /* background-color: turquoise; */ } </style> </head> <body> <div></div> </body> </html>
支持不同方向的渐变
div{ width: 300px; height: 300px; border: 10px solid turquoise; /* 支持多个颜色渐变 */ /* background: linear-gradient(aqua, aquamarine, turquoise); */ /* 支持多个方向的渐变 */ background: linear-gradient(to right, aqua, aquamarine, turquoise); /* background-color: turquoise; */ }
右上角方向
div{ width: 300px; height: 300px; border: 10px solid turquoise; /* 支持多个颜色渐变 */ /* background: linear-gradient(aqua, aquamarine, turquoise); */ /* 支持多个方向的渐变 */ background: linear-gradient(to right top, aqua, aquamarine, turquoise); }
支持角度的写法
div{ width: 300px; height: 300px; border: 10px solid turquoise; /* 支持多个颜色渐变 */ /* background: linear-gradient(aqua, aquamarine, turquoise); */ /* 支持多个方向的渐变 */ /* background: linear-gradient(to right top, aqua, aquamarine, turquoise); */ /* 支持角度的写法 */ background: linear-gradient(60deg, aqua, aquamarine, turquoise); }
径向渐变
.box1{ width: 200px; height: 200px; border: 5px solid turquoise; background: radial-gradient(aqua, aquamarine, turquoise); }
支持改变比例（前文的线性渐变也支持比例的改变，方法一样）：
.box1{ width: 200px; height: 200px; border: 5px solid turquoise; /* background: radial-gradient(aqua, aquamarine, turquoise); */ background: radial-gradient(aqua 0%, aquamarine 10%, turquoise 30%); }
来个长方形版本：
.box2{ width: 300px; height: 100px; border: 5px solid turquoise; background: radial-gradient(aqua, aquamarine, turquoise); margin-top: 10px; }
支持改变形状：
.box2{ width: 300px; height: 100px; border: 5px solid turquoise; /* background: radial-gradient(aqua, aquamarine, turquoise); */ margin-top: 10px; background: radial-gradient(circle, aqua, aquamarine, turquoise); }
支持中心点的移动，以及环的大小
重复渐变
这个其实就是在线性渐变和径向渐变的函数前面加一个repeating就好了
线性重复渐变：
div{ width: 500px; height: 500px; border: 10px solid turquoise; background: repeating-linear-gradient(aqua, aquamarine 10%, turquoise 20%); }
div{ width: 500px; height: 500px; border: 10px solid turquoise; /* 线性重复渐变 */ /* background: repeating-linear-gradient(aqua, aquamarine 10%, turquoise 20%); */ /* 径向重复渐变 */ background: repeating-radial-gradient(aqua, aquamarine 10%, turquoise 20%); }
太极案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-color: cornsilk; } div{ width: 200px; height: 200px; background: linear-gradient(white 50%, black 50%); margin: 0 auto; display: flex; align-items: center; border-radius: 50%; } div::before{ content: ""; display: block; width: 100px; height: 100px; background-color: black; border-radius: 50%; background: radial-gradient(white 25%, black 25%); } div::after{ content: ""; display: block; width: 100px; height: 100px; background-color: white; border-radius: 50%; background: radial-gradient(black 25%, white 25%); } </style> </head> <body> <div></div> </body> </html>
过渡
div{ width: 200px; height: 200px; background: aqua; transition: all 2s linear 1s; /* all 表示所有属性, 也可以写单独一个属性名字, 但不能写多个属性名 2s 动画时间 linear 匀速过渡 1s 延迟时间 */ } div:hover{ width: 400px; height: 400px; background: aquamarine; }
注意，无法过渡display属性。但是可以通过将高度为零的盒子改为有高度的盒子间接实现此效果（注意，需要加上overflow:hidden， 否则子元素并不会因为父元素高度为0而被隐藏）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 50px; background: yellowgreen; border: 1px solid gray; } div ul{ height: 0px; margin-top: 50px; overflow: hidden; transition: 2s; } div:hover ul{ height: 200px; } </style> </head> <body> <div>菜单 <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> </ul> </div> </body> </html>
动画的过渡类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul{ list-style: none; } li{ width: 200px; height: 50px; border: 1px solid gray; } ul:hover li:nth-child(1){ width: 600px; transition: all 2s linear; } ul:hover li:nth-child(2){ width: 600px; transition: all 2s ease; } ul:hover li:nth-child(3){ width: 600px; transition: all 2s ease-in; } ul:hover li:nth-child(4){ width: 600px; transition: all 2s ease-out; } ul:hover li:nth-child(5){ width: 600px; transition: all 2s ease-in-out; } ul:hover li:nth-child(5){ width: 600px; transition: all 2s ease-in-out; } /* 支持自定义贝塞尔曲线, 在cubic-bezier.com进行获取 */ ul:hover li:nth-child(6){ width: 600px; transition: all 2s cubic-bezier(0,1.29,1,-0.28); } </style> </head> <body> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> <li>5555</li> <li>6666</li> </ul> </body> </html>
可以说，linear/ease等五个属性值都是一种特殊的贝塞尔曲线。、
最后一种贝塞尔曲线我设置的是：
所以会有一种加速到中间反而回退一段距离，然后再加速的效果。
单一属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; background: aqua; /* 需要监控的属性 */ transition-property: width backgound; /* 动画时间 */ transition-duration: 1s; /* 动画效果 */ transition-timing-function: linear; /* 延迟时间 */ transition-delay: 0.5s; } div:hover{ width: 600px; background: aquamarine; } </style> </head> <body> <div></div> </body> </html>
2d平移 transform属性 translate方法
div{ width: 200px; height: 200px; background: aqua; transition: all 1s; margin: 0 auto; } div:hover{ transform: translateX(-100px) translateY(100px); /* 下面这种写法等价 */ transform: translate(-100px, 100px) }
当然，translate的参数可以传百分比，表示相对于自身的百分比长度。
其实，也可以使用了绝对定位的left top等属性实现平移效果。这种实现方式与用transform的区别是什么？
> 设置left属性（包括margin和padding等等）会频繁地造成浏览器回流重排，而transform和opacity属性不会，因为它是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的好处如下：
* 可以通过亚像素精度得到一个运行在特殊优化过的单位图形任务上的平滑动画，并且运行非常快。
* 动画不再绑定到CPU重排，而是通过GPU合成图像。即使运行一个非常复杂的js任务，动画仍然会很快运行。
2d缩放 transform属性 scale方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 300px; /* height: 300px; */ border: 5px solid black; margin: 100px auto; overflow: hidden; } img{ display: block; width: 100%; transition: all 1s; } div:hover img{ transform: scale(1.5); /* 负值-倒向放大效果 支持x轴 y轴单独方法 */ /* transform: scaleX(1.5); */ /* transform: scaleY(1.5); */ } </style> </head> <body> <div> <img src="../../../img/2.jpg" alt=""> </div> </body> </html>
支持改变中心点位置 这里设置从左上角开始放大
div{ width: 300px; /* height: 300px; */ border: 5px solid black; margin: 100px auto; overflow: hidden; } img{ display: block; width: 100%; transition: all 1s; /* 改变中心点的位置，默认在中间 */ transform-origin: left top; } div:hover img{ transform: scale(1.5); /* 负值-倒向放大效果 支持x轴 y轴单独方法 */ /* transform: scaleX(1.5); */ /* transform: scaleY(1.5); */ }
2d旋转 transform属性 rotate方法
为前文的太极案例添加旋转
div:hover{ /* rotate与rotateZ等价 */ transform: rotate(360deg); }
另外还有别的旋转方式
div:hover{ /* rotate与rotateZ等价 */ transform: rotate(360deg); /* rotateX会绕水平轴旋转 */ transform: rotateX(360deg); /* rotateY会绕垂直轴旋转 */ transform: scaleY(360deg); }
也可以设置中心轴，给div添加此属性。
transform-origin: left top;
折扇案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0px; margin: 0px; } ul{ list-style: none; margin: 10px auto; width: 600px; height: 400px; border: 5px solid gray; position: relative; } li{ width: 60px; height: 200px; position: absolute; left: 50%; margin-left: -30px; bottom: 30px; text-align: center; /* 调整中心点 */ transform-origin: bottom center; border-radius: 10px; transition: all 1s; opacity: 0; box-shadow: 0 0 5px black; } ul:hover li{ opacity: 1; } ul li:nth-child(1),ul li:nth-child(13){ background-color: purple; } ul li:nth-child(2),ul li:nth-child(12){ background-color: darkblue; } ul li:nth-child(3),ul li:nth-child(11){ background-color: deeppink; } ul li:nth-child(4),ul li:nth-child(10){ background-color: deepskyblue; } ul li:nth-child(5),ul li:nth-child(9){ background-color: darkgreen; } ul li:nth-child(6),ul li:nth-child(8){ background-color: darkslateblue; } ul li:nth-child(7){ background-color: red; opacity: 1; } ul:hover li:nth-child(1){ transform: rotate(90deg); } ul:hover li:nth-child(13){ transform: rotate(-90deg); } ul:hover li:nth-child(2){ transform: rotate(75deg); } ul:hover li:nth-child(12){ transform: rotate(-75deg); } ul:hover li:nth-child(3){ transform: rotate(60deg); } ul:hover li:nth-child(11){ transform: rotate(-60deg); } ul:hover li:nth-child(4){ transform: rotate(45deg); } ul:hover li:nth-child(10){ transform: rotate(-45deg); } ul:hover li:nth-child(5){ transform: rotate(30deg); } ul:hover li:nth-child(9){ transform: rotate(-30deg); } ul:hover li:nth-child(6){ transform: rotate(15deg); } ul:hover li:nth-child(8){ transform: rotate(-15deg); } </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> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> </ul> </body> </html>
多重属性
①位移＋缩放
首先写上这样一段代码：母盒子box中有三个div子盒子，第一个盒子让它向右移动400px， 第二个盒子让它移动400px并缩放0.5倍，第三个盒子先缩放0.5倍再向右移动400px。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 600px; height: 600px; border: 2px solid grey; } .box div{ width: 200px; height: 200px; background: red; border: 1px solid black; } .box div:nth-child(1){ transform: translateX(400px); } .box div:nth-child(2){ transform: translateX(400px) scale(0.5); } .box div:nth-child(3){ transform: scale(0.5) translateX(400px); } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> </div> </body> </html>
还记的我们之前说到过的么：translatino的参数可以传百分比，表示相对于自身的百分比长度。那么相当于translation是以自身大小为依据进行位移的。因此第三个盒子在缩放大小的时候，也会缩放位移距离。
①位移＋旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 600px; height: 600px; border: 2px solid grey; } .box div{ width: 100px; height: 100px; background: red; border: 1px solid black; } .box div:nth-child(1){ transform: translateX(400px); } .box div:nth-child(2){ transform: translateX(400px) rotate(45deg); } .box div:nth-child(3){ transform: rotate(45deg) translateX(400px); } </style> </head> <body> <div class="box"> <div></div> <div></div> <div></div> </div> </body> </html>
出现这种情况的原因是，第三个盒子在旋转的时候，x轴、y轴也会旋转。
倾斜属性
div{ width: 200px; height: 200px; background: red; line-height: 200px; text-align: center; border: 1px solid black; font-size: 50px; margin: 0 auto; transform: skew(30deg); /* skewX() 正值表示向右拖拽线条直到规定度数，负值反之。 skewX() 正值表示向下拖拽线条直到规定读书 skew(x,y) */ }
案例 资料卡效果
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
}
img{
display: block;
width: 100%;
transition: all 500ms;
}
.box:hover img{
transform: translateX(50px);
opacity: 0.7;
}
.box{
width: 350px;
border: 5px solid gray;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.box h2{
position: absolute;
left: 50px;
top: 100px;
color: white;
transition: all 2s;
/* transform: translateX(50px); */
}
.box:hover h2{
transform: translateX(50px);
}
.box p{
position: absolute;
left: 100px;
width: 100px;
background-color: deepskyblue;
transition: all 100ms ease 100ms;
}
/* 这里为什么要从3开始，因为从3开始才是p标签 */
.box p:nth-child(3){
top: 140px;
transform: translateY(110px);
}
.box p:nth-child(4){
top: 170px;
transform: translateX(-200px);
}
.box p:nth-child(5){
top: 200px;
transform: translateX(250px);
}
.box:hover p:nth-child(3){
transform: translateY(0);
}
.box:hover p:nth-child(4){
transform: translateX(0);
}
.box:hover p:nth-child(5){
transform: translateX(0);
}
.box1{
width: 350px;
border: 5px solid gray;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.box1:hover img{
transform: scale(1.5);
opacity: 0.5;
}
.box1 h2{
position: absolute;
left: 80px;
top: -30px;
color: white;
transition: all 1s;
opacity: 0;
/* transform: translateX(50px); */
}
.box1:hover h2{
transform: translateY(240px);
opacity: 1;
}
.box1 p{
position: absolute;
left: 50px;
bottom: -130px;
width: 250px;
text-align: justify;
transition: all 1s;
opacity: 0;
}
.box1:hover p{
transform: translateY(-200px);
opacity: 1;
}
.box1 i{
position: absolute;
top: 10px;
right: 10px;
transition: all 1s;
}
.box1:hover i{
transform: rotate(360deg);
}
关键帧动画（ animation ）
> animation 与 transition 的相同点：都是随着时间改变元素的属性值。
> animation 与 transition 的区别：transition 需要触发一个事件（hover事件或click事件等）才会随着时间改变其css属性； 而animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素的css属性值，从而达到一种动画的效果。css3的animation就需要明确的动画属性值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; background: aqua; animation: myanimation2 2s linear 1s 2 alternate; /* 第一个值 动画名称 需要自己定义 对应单一属性 animation-name 第二个值 动画持续时间 对应单一属性 animation-duration 第三个值 动画过渡类型 对应单一属性 animation-timing-function 第四个值 动画延迟时间 对应单一属性 animation-delay 第五个值 动画循环次数 如果想要无限循环 infinite 对应单一属性 第六个值 动画在循环中是否反向运动 对应单一属性 animation-direction:*/ /* animation-name: myanimation2; animation-duration: 2s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; */ /* 此属性有四个值 normal(正常) reverse(反方向) alternate(交替) alternate-reverse(反方向交替) */ /* 控制是否暂停，一般卸载hover里面 */ animation-play-state: running; } /* 声明动画 */ /* 关键帧 */ @keyframes myanimation1 { from{ width: 200px; height: 200px; background: aqua; } to{ width: 400px; height: 600px; background: aquamarine; } } @keyframes myanimation2 { 0%{ width: 200px; height: 200px; background: aqua; } 25%{ width: 200px; height: 400px; background: skyblue; } 50%{ width: 200px; height: 400px; background: gray; } 100%{ width: 400px; height: 600px; background: aquamarine; } } </style> </head> <body> <div></div> </body> </html>
保留最后一帧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } html,body{ height: 100% } div{ height: 100%; width: 200px; background-color: aqua; position: fixed; left: 0px; top: 0px; /* 动画结束之后会回到原来的状态，因此如果想要动画停在最后一帧，就不要写原来的状态 */ /* transform: translateX(-100%); */ animation: run 2s linear ; /* 还有一种更加稳妥的做法: 设置关键帧动画停在最后一帧 */ animation-fill-mode: forwards; /* none(默认不保留) forwords(保留最后一帧的状态) backwords(保留最后一帧的状态) */ } @keyframes run { from{ transform: translateX(-100%); } to{ transform: translateX(0%); } } </style> </head> <body> <div></div> </body> </html>
轮播案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .swiper-container{ width: 640px; height: 350px; margin: 0 auto; border: 1px solid gainsboro; overflow: hidden; } .swiper-container img{ display: block; width: 640px; height: 350px; } .swiper-container .swiper-slider{ float: left; } .swiper-container .swiper-wrap{ width: 9999px; animation: swiperrun 5s linear infinite; } .swiper-container:hover .swiper-wrap{ animation-play-state: paused; } @keyframes swiperrun { 0%{ transform: translateX(0); } 10%{ transform: translateX(-640px); } 20%{ transform: translateX(-640px); } 30%{ transform: translateX(-1280px); } 40%{ transform: translateX(-1280px); } 50%{ transform: translateX(-1920px); } 60%{ transform: translateX(-1920px); } 70%{ transform: translateX(-2560px); } 80%{ transform: translateX(-2560px); } 90%{ transform: translateX(-3200px); } 100%{ transform: translateX(-3200px); } } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrap"> <div class="swiper-slider"> <img src="../../../img/2.jpg" alt=""> </div> <div class="swiper-slider"> <img src="../../../img/5.jpg" alt=""> </div> <div class="swiper-slider"> <img src="../../../img/6.jpg" alt=""> </div> <div class="swiper-slider"> <img src="../../../img/10.jpg" alt=""> </div> <div class="swiper-slider"> <img src="../../../img/14.jpg" alt=""> </div> <!-- 为了实现最后一张图片不要突然切换。可以复制一份第一张图片到最后 --> <div class="swiper-slider"> <img src="../../../img/2.jpg" alt=""> </div> </div> </div> </body> </html>
逐帧动画的一些属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 200px; height: 200px; /* background-color: aqua; */ background-color: red; /* 下面这个语句表示动画的每一步都只有1帧。 end表示保留当前帧。由于最后一个状态只有一帧就跳回初状态，换得太快因此无法看到最后一帧的状态。 */ /* animation: run 5s steps(1, end) */ /* 上面的写法与以下语句同效 */ /* animation: run 5s step-end */ /* 下面这个语句表示动画的每一步都只有1帧。 start表示保留下一帧。由于第一个状态只有一帧就跳到下一个状态，换得太快因此无法看到第一帧的状态。 */ /* animation: run 5s steps(1, start) */ /* 上面的写法与以下语句同效 */ /* animation: run 5s step-start */ } @keyframes run { 0%{ background-color: red; } 50%{ background-color: green; } 100%{ background-color: yellow; } } </style> </head> <body> <div></div> </body> </html>
逐帧动画案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 180px; height: 320px; background-image: url(./img/1.webp); /* background-position: -180px; */ animation: run 10s step-end infinite; } @keyframes run { 0%{ background-position: 0px; } 12.5%{ background-position: -180px; } 25%{ background-position: -360px; } 37.5%{ background-position: -540px; } 50%{ background-position: -720px; } 62.5%{ background-position: -900px; } 75%{ background-position: -1080px; } 87.5%{ background-position: -1260px; } 100%{ background-position: -1440px; } } </style> </head> <body> <div></div> </body> </html>
引入动画库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css"> <style> div{ width: 200px; height: 200px; background-color: aqua; margin: 100px auto; } </style> </head> <body> <div class="animated bounce" id="dowebok"></div> </body> </html>
3D
3D位移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; height: 500px; border: 5px solid black; /* 属性值为preserve-3d表示3d的 */ transform-style: preserve-3d; position: relative; /* flat表示平面 即2d的 默认 */ margin: 0 auto; /* transform: rotateY(30deg); */ } .center{ position: absolute; width: 200px; height: 200px; background-color: red; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; /* 只设置translateZ不会有近大远小的视觉效果，因为没有设置景深，因此默认景深无限远 如果想实现近大远小的效果，需要在父盒子或者自己身上设置景深。 在父盒子上设置prospective属性，如: prospective:900px; 或者在自己身上设置transform属性，如: ttransform:perspective(900px) 只需要设置一个即可，否则会冲突，建议只设置父元素，通常数值在900px-1200px之间 */ transform: translateZ(20px); /* 上一句等价于下一句 */ transform: translate(0,0,200px); } </style> </head> <body> <div class="box"> <div class="center"></div> </div> </body> </html>
3D旋转
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; height: 500px; border: 5px solid gray; display: flex; transform-style: preserve-3d; transform: rotateY(30deg); } .center{ margin: auto; width: 200px; height: 200px; background-color: red; transform: rotateX(30deg); } </style> </head> <body> <div class="box"> <div class="center"></div> </div> </body> </html>
3D缩放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; height: 500px; border: 5px solid gray; display: flex; transform-style: preserve-3d; perspective: 800px; } .center{ margin: auto; width: 200px; height: 200px; background-color: red; /* 在x轴放大两倍 */ /* transform: scaleX(2); */ /* 在z轴如何放大？ */ transform: scaleZ(20) rotateX(45deg) rotateY(30deg); } </style> </head> <body> <div class="box"> <div class="center"></div> </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 500px; height: 500px; border: 5px solid gray; display: flex; transform-style: preserve-3d; perspective: 800px; } .center{ margin: auto; width: 200px; height: 200px; background-color: red; /* 在x轴放大两倍 */ /* transform: scaleX(2); */ /* 在z轴如何放大？ */ transform: scaleZ(20) rotateX(45deg) rotateY(30deg); } </style> </head> <body> <div class="box"> <div class="center"></div> </div> </body> </html>
立方体案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 500px; width: 500px; border: 5px solid gray; position: relative; /* perspective: 800px; */ transform-style: preserve-3d; display: flex; transform: rotateY(0deg) rotateX(0deg); } .box div{ height: 200px; width: 200px; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; position: absolute; font-size: 50px; color: white; text-align: center; line-height: 200px; opacity: 0.7; } .front{ background: red; /* z-indeSx: 1; */ } .left{ background: yellow; transform: translateZ(-100px) translateX(-100px) rotateY(-90deg); } .right{ background-color: green; transform: translateX(100px) translateZ(-100px) rotateY(90deg); } .back{ background-color: chocolate; transform: translateZ(-200px); } .top{ background-color: blueviolet; transform: translateZ(-100px) translateY(-100px) rotateX(90deg); } .bottom{ background-color: deepskyblue; transform: translateZ(-100px) translateY(100px) rotateX(-90deg); } </style> </head> <body> <div class="box"> <div class="front">1</div> <div class="left">2</div> <div class="right">3</div> <div class="back">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> </body> </html>
浙公网安备 33010602011771号