CSS3 添加了三大属性:过渡、动画、变形
过渡:
transition:过渡属性 过渡时间 缓冲描述 延迟时间
如:transition:all 1s ease 1s;
动画:
声明动画:
@keyframes 动画名{ //等价于0% from { } 40% { } //等价于100% to { } }
调用动画
animation:动画名 动画时间 缓冲描述 延迟时间 动画次数 自动补充反方向动画alternate 是否保存最后一帧状态forwards
变形
平移
transform:translate(x , y)
transform:translateX()translateY()
旋转 transform:rotate(度数deg 正方向顺时针)
缩放 transform:scale(数字值0-1)
css 3D
2D与3D的区别就在于坐标系。
当我们给元素加translateZ的时候,浏览器显示不出效果,因为刘安琪不知道该如何渲染
于是有一个属性能够决定屏幕与页面的距离 perspective
perspective
该属性用于开启3D坐标系效果。决定舞台距离屏幕的距离。
当一个元素拥有该属性时,表示该元素距离屏幕有一定的距离。
加了perspective属性,使该元素有了3D的效果
如以下例子:
没加perspective属性,box沿x轴旋转,只会产生box1高度减小的效果,并没有3D的x轴旋转效果
加了perspective属性后,box沿x轴旋转,会产生3D效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .box { perspective: 3000px; width: 600px; text-align: center; margin: 0 auto; padding-top: 100px; } img { border: 1px solid blue; transition: all 1s ease 0s; } img:hover { /*悬浮时*/ transform: rotateX(45deg); } .box1 { width: 600px; text-align: center; margin: 0 auto; padding-top: 100px; } .box1 img:hover { /*悬浮时*/ transform: rotateX(-45deg); } </style> </head> <body> <div class="box"> <img src="imgs/logo.png" alt=""> </div> <div class="box1"> <img src="imgs/logo.png" alt=""> </div> </body> </html>
transform-style 子元素保留3D效果
transform-style: preserve-3d;
该属性用于让子元素的3d效果保留
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { /*perspective: 3000px;*/ transform-style: preserve-3d; width: 300px; height: 300px; margin: 100px auto; border: 1px solid blue; transform: rotateY(30deg); } #child { width: 300px; height: 300px; background-color: red; transform: rotateX(30deg); } </style> </head> <body> <div id="box"> <div id="child"></div> </div> </body> </html>
立方体
用以上属性可以做一个3D立方体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #unit { transform-style: preserve-3d; width: 300px; height: 300px; border: 1px solid blue; position: relative; margin: 100px auto; transform: rotateX(30deg) rotateY(45deg); /*animation: zhuan 3s ease 0s infinite;*/ /* transform: rotateY(23deg) rotateX(40deg); */ } /* 定义动画 */ @keyframes zhuan { from { transform: rotateX(0deg) rotateY(35deg); } to { transform: rotateX(359deg) rotateY(35deg); } } #unit div { opacity: .5; /*为了让6个面叠在一起 所以添加定位值*/ position: absolute; top: 0; left: 0; width: 300px; height: 300px; } .front { background-color: red; /*第一个元素是正面 朝上 向上抬起300px*/ transform: translateZ(150px); } .back { background-color: blue; /*因为第一个front向上走了300 而整体的立方体宽高厚都是300 所以本元素不动*/ transform: translateZ(-150px); } .left { background-color: orange; /*如果直接旋转90deg 那么会只有一半*/ /*所以 要先往上平移150 就是沿着它的z轴 再旋转*/ /*transform: rotateX(90deg);*/ /*transform: translateZ(150px) rotateX(90deg) ;*/ /*此时它 不再边上而是在正中心 所以又要平移到边上 沿着自身的z轴 往前或者往后走150px*/ transform: rotateX(90deg) translateZ(150px); } .right { background-color: pink; /*先往上走150px 再旋转 再往后走150px*/ transform: rotateX(90deg) translateZ(-150px); } .bottom { background-color: skyblue; /*先往上走150px 到达中心 再沿着y轴旋转90deg 在往前走150px*/ transform: rotateY(90deg) translateZ(150px); } .top { background-color: tan; transform: rotateY(90deg) translateZ(-150px); } </style> </head> <body> <!-- 分析: 立方体 6个面 每一个面用一个元素来表示 为了方便添加动画 所以在这6个元素外添加一个盒子--> <div id="unit"> <div class="front"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> <div class="top"></div> </div> </body> </html>
transform:scaleZ()
scaleZ属于z轴方向的缩放 但是对于一个元素自身来说 没有任何意义 因为元素没有“厚度”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 300px; height: 300px; background-color: red; margin: 200px auto; /*添加scaleX Y Z*/ transform: scaleX(2) scaleY(.1); /*如果设置scaleZ 没有任何意义*/ } </style> </head> <body> <!-- scaleZ属于z轴方向的缩放 但是对于一个元素自身来说 没有任何意义 因为元素没有“厚度” --> <!-- 但是scaleZ对元素内部的子元素是有用的 --> <!-- 针对元素自身 --> <div id="box"></div> </body> </html>
但是scaleZ对元素内部的子元素是有用的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #unit { transform-style: preserve-3d; width: 300px; height: 300px; border: 1px solid blue; position: relative; margin: 200px auto; /*transform: rotateX(30deg) rotateY(45deg);*/ /*animation: zhuan 3s ease 0s infinite;*/ /*transform: rotateY(23deg) rotateX(40deg);*/ /*给父元素添加scaleZ*/ transform: rotateY(23deg) rotateX(40deg) scaleZ(2); } /* 定义动画 */ @keyframes zhuan { from { transform: rotateX(0deg) rotateY(35deg); } to { transform: rotateX(359deg) rotateY(35deg); } } #unit div { opacity: .5; /*为了让6个面叠在一起 所以添加定位值*/ position: absolute; top: 0; left: 0; width: 300px; height: 300px; } .front { background-color: red; /*第一个元素是正面 朝上 向上抬起300px*/ transform: translateZ(150px); } .back { background-color: blue; /*因为第一个front向上走了300 而整体的立方体宽高厚都是300 所以本元素不动*/ transform: translateZ(-150px); } .left { background-color: orange; /*如果直接旋转90deg 那么会只有一半*/ /*所以 要先往上平移150 就是沿着它的z轴 再旋转*/ /*transform: rotateX(90deg);*/ /*transform: translateZ(150px) rotateX(90deg) ;*/ /*此时它 不再边上而是在正中心 所以又要平移到边上 沿着自身的z轴 往前或者往后走150px*/ transform: rotateX(90deg) translateZ(150px); } .right { background-color: pink; /*先往上走150px 再旋转 再往后走150px*/ transform: rotateX(90deg) translateZ(-150px); } .bottom { background-color: skyblue; /*先往上走150px 到达中心 再沿着y轴旋转90deg 在往前走150px*/ transform: rotateY(90deg) translateZ(150px); } .top { background-color: tan; transform: rotateY(90deg) translateZ(-150px); } </style> </head> <body> <!-- 分析: 立方体 6个面 每一个面用一个元素来表示 为了方便添加动画 所以在这6个元素外添加一个盒子--> <div id="unit"> <div class="front"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> <div class="top"></div> </div> </body> </html>
使用scaleZ( )后,
backface-visibility属性
backface-visibility: hidden; 背面隐藏 (虽然隐藏,但依旧占据标准流中的位置)
一个图片添加翻转属性 让它沿着x轴旋转180deg,那样就是图片的反面面对我们,正常也是可以见到图片的反面,添加backface-visibility:hidden;图片的反面不可见
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { text-align: center; } img { /*添加背面不可见属性*/ backface-visibility: hidden; transform: rotateX(180deg); } </style> </head> <body> <div id="box"> <img src="imgs/logo.png" alt=""> </div> </body> </html>
改变旋转中心
改变旋转中心,使用css3的属性transform-origin 来设置
有三个值: transform-origin: x y z;
写法有3种: 单词、 像素值、 百分比
单词写法:
x轴 => left、 center、 right
y轴 => top、 middle、 bottom
百分比:这个属性有一个默认值: 50% 50% 0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } h2 { text-align: center; } div[id^=box] { width: 560px; height: 300px; margin: 200px auto; border: 1px solid blue; } /*让图片旋转*/ #box1 img { transform: rotate(45deg); } /*改变图片的旋转中心 再次旋转*/ #box2 img { /*值有3个分别代表x轴 y轴 z轴 但是一般使用前两个*/ /*写法有3种 第一种使用英文单词*/ /*transform-origin: center top;*/ /*transform-origin: 0 0;*/ /*transform-origin: 0% 0%;*/ transform: rotate(45deg); } </style> </head> <body> <h2>图片</h2> <div id="box"> <img src="imgs/0.jpg" alt=""> </div> <h2>图片沿着Z轴旋转45角度</h2> <div id="box1"> <img src="imgs/0.jpg" alt=""> </div> <h2>改变旋转轴 再旋转45角度</h2> <div id="box2"> <img src="imgs/0.jpg" alt=""> </div> </body> </html>