笔记总结
-
CSS的变换效果
-
transform 2d转换
-
translate（）进行平移效果，有2个参数对应X、Y轴。
-
scale()用于缩放标签，当参数只有一个时，整体放大和缩小，当参数是两个时，可以分别调整x、y轴的缩放倍数。
-
rotate（）用于旋转元素。rotateX() rotateY() rotateZ() 分别绕着xyz轴旋转
-
skew()有两个参数分别代表在x轴方向的扭曲程度，以及在y轴方向的扭曲程度。
-
matrix()把所有2D转换方法组合在一起。matrix()方法需要六个参数，包含数学函数，允许你：旋转、缩放、移动以及倾斜。
-
-
trabsform 3d转换
- Perspective:同来控制视距的属性，属性值事指距离屏幕的像素值。（例Perpective:800px)
- transform-style:用来transform的显示效果，有平面模式（fiat）,3d模式（preserve-3d）
- transform-origin:用来控制旋转轴的位置
-
-
过渡效果
transition：默认是所有属性都进行过渡，参数列表（name|duration|delay）。
transition支持部分属性过渡，例如你可以指定宽高属性拥有过渡属性，这时其他属性将不再支持过渡。
-
动画效果
@keyframes用来设置动画效果，可以使用from和to定义开始动画和结束动画，也可以使用百分比控制整个动画的节奏
作业
实现代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片魔方</title> </head> <style> body { perspective: 800px; } @keyframes myAnimation{ from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } .con { width: 200px; height: 200px; margin: 300px auto; position: relative; border: 1px solid red; transform-style: preserve-3d; transform: rotateX(30deg) rotateY(30deg); animation: myAnimation 10s infinite linear; } .con>img { width: 200px; height: 200px; position: absolute; } .con:hover > img:first-child{ transform: translateZ(-200px); } .con > img:first-child{ transform: translateZ(200px); } .con:hover > img:nth-child(2){ transform: translateX(-200px) rotateY(90deg); } .con>img:nth-child(2) { left: -200px; transform: rotateY(90deg); transform-origin: right; } .con:hover>img:nth-child(3) { transform: translateX(200px) rotateY(-90deg); } .con>img:nth-child(3) { right: -200px; transform-origin: left; transform: rotateY(-90deg); } .con:hover>img:nth-child(4) { transform: translateY(-200px) rotateX(-90deg); } .con>img:nth-child(4) { top: -200px; transform-origin: bottom; transform: rotateX(-90deg); /* transform-origin:left; transform: rotateY(-90deg); */ } .con:hover>img:nth-child(5) { transform: translateY(200px) rotateX(90deg); } .con>img:nth-child(5) { bottom: -200px; transform-origin: top; transform: rotateX(90deg); } .con:hover>img:last-child { transform: translateZ(400px); } .con>img:last-child { transform: translateZ(200px); } </style> <body> <div class="con"> <img src="./1.png" alt=""> <img src="./2.png" alt=""> <img src="./3.png" alt=""> <img src="./衣服.png" alt=""> <img src="./5.jpg" alt=""> <img src="./6.jpg" alt=""> </div> </body> </html>
效果如下
