笔记总结
-
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>
效果如下
