3d位移分为x轴,y轴,z轴三个方向位移如下:
transform:translateX() transform:translateY() transform:translateZ()
综合写法: transform:translate3d(x,y,z)
特别注意:如果是z轴位移需要给父元素添加透视属性(perspective)取值范围一般在800px-1200px之间或者给父元素转换为3d模式(transform-style: preserve-3d;)
位移速度过快可以给需要的元素添加过渡,设置过渡时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
/* 透视:近大远小,近实远虚,如果你想看到z轴,需要父级添加透视 */
/* 透视的取值为800-1200 */
/* 透视:调整眼睛到屏幕的距离,值越大距离越远,盒子看起来越小,反之越大 */
perspective: 800px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 200px auto;
transition: all 2s;
}
.box:hover{
/* 面对你自己的方向 z轴 默认在平面无法看到z轴的变化,正值面对自己,负值面对自己的反方向 */
/* 综合写法 :tranlate3d(x,y,z) */
transform: translate3d(-400px,500px,-500px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>3d旋转分为x轴,y轴,z轴三个方位旋转
x轴 正值从下往上 负值从上往下 上下旋转 单位为deg(度)和turn(圈) 其中360deg=1turn
例如:transform: rotateX(222turn); 沿着x轴从下往上旋转222圈
y轴 正值从左往右 负值从右往左 左右旋转 单位为deg(度)和turn(圈) 其中360deg=1turn
例如:transform: rotateY(222turn); 沿着y轴从左往右旋转222圈
z轴 正值是顺时针转圈 负值是逆时针在转圈 单位为deg(度)和turn(圈) 其中360deg=1turn
例如:transform: rotateZ(222turn); 沿着z轴顺时针旋转222圈
注意点:z轴旋转需要给父元素添加透视或者转换为3d模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
margin: 200px auto;
/* 需要添加透视 */
perspective: 800px;
}
.box img{
width: 100%;
height: 100%;
transition: all 2s;
}
.box:hover img{
/* x轴 正值从下往上 负值从上往下 上下旋转*/
transform: rotateX(222turn);
/* y轴 正值从左往右 负值从右往左 左右旋转 */
transform: rotateY(222turn);
/* z轴 正值是顺时针转圈 负值是逆时针在转圈 */
transform: rotateZ(-222turn);
/* 综合写法 rotate3d（x，y，z，角度度数），x，y，z取值为0-1，跟上一个角度 */
transform: rotate3d(0.3,1,0.8,3600000deg);
}
</style>
</head>
<body>
<div class="box">
<img src="../../移动web-01/老师的资料/images/p4-tx3.png" alt="">
</div>
</body>
</html>动画
想运行动画必须分为两个步骤:
1.定义动画
2.调用动画
调用动画有很多种状态:animation: 属性名 动画执行时间 动画速度(匀速linear) 动画的延迟时间 动画的循环次数(无限循环infinite) 动画的方向(alternate) 动画的结束状态;
其中动画结束状态不能和动画的循环次数以及动画的方向同时使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-image: linear-gradient(red,yellow,blue,aqua);
border-radius: 50%;
margin: 500px auto;
/* 调用动画 */
/* animation: 属性名 动画执行时间 动画速度(匀速linear) 动画的延迟时间 动画的循环次数(无限循环infinite) 动画的方向(alternate) 动画的结束状态; */
/* 动画结束状态不能和动画的循环次数以及动画的方向同时使用 */
/* foewards停留在最后一帧 */
animation: heima 1s infinite;
}
@keyframes heima {
0%{
transform: translate(0,0) ;
}
25%{
transform: translate(800px,300px) rotateZ(10turn);
}
50%{
transform: translate(0,-300px) rotateZ(221turn);
}
75%{
transform: translate(800px,0) rotateZ(2218turn);
}
100%{
transform: translate(0,0) rotateZ(22222turn);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>动画的轮播图
首先做动画的轮播图需要以下几步:
1.最底部盒子选用播放图片的宽度(几个图片就是几个图片的宽)
2.用一个只有宽度的盒子将图片装起来
3.将图片浮动进入只有宽度的盒子
3.定义动画,调用动画
4.图片个数达不到装它盒子的宽度需要在盒子后面添加前几张的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.最底部盒子选用播放图片的宽度(几个图片就是几个图片的宽)
2.用一个只有宽度的盒子将图片装起来
3.设置循环动画,需要填满装图片的盒子 */
.box{
width: 600px;
height: 150px;
border: 10px solid #000;
margin: 200px auto;
overflow: hidden;
}
.box:hover .son{
/* 暂停动画 */
animation-play-state: paused;
}
.son{
width: 2000px;
animation: lunbotu 5s linear infinite;
}
.son img{
float: left;
width: 200px;
height: 150px;
}
@keyframes lunbotu {
0%{
transform: translate(0,0);
}
100%{
transform: translate(-1400px,0);
}
}
</style>
</head>
<body>
<div class="box">
<div class="son">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.jpg" alt="">
<img src="./images/5.jpg" alt="">
<img src="./images/6.jpg" alt="">
<img src="./images/7.jpg" alt="">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
</div>
</div>
</body>
</html>