3D、
3d的效果通过需要远距离观察才能看出立体效果,因为距离太近,我们只能看出平面的2d效果,这就需要在设置3d变换效果之前,需要先设置景深:
perspective: 1200px; /* 在父元素中使用,设置景深 */
同时,我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果:
perspective-origin: 50% 50%;
对于3d的效果来讲,同样具有平移和旋转,但因为平移和旋转同样适用于2d效果,所以我们还需要告诉浏览器当前场景是在3d效果下进行的:
transform-style:preserve-3d; /* 表示在3d空间中展示 */
旋转、
语法:
transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */
transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */
transform: rotateZ(旋转的角度); /* 绕着z轴旋转多少角度 */
平移、
语法:
transform: translateX(像素值); /* 水平方向移动,正值向右,负值向左 */
transform: translateY(像素值); /* 垂直方向移动,正值向下,负值向上 */
transform: translateZ(像素值); /* z轴方向移动,正值距离眼睛更近,负值距离眼睛更远 */
transform: translate3d(水平方向像素值, 垂直方向像素值, z轴方向像素值); /* 复合写法 */
例、
<style>
.box{
width: 500px;
height: 500px;
border:1px solid #000;
perspective: 1200px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
margin: 50px auto;
position:relative;
}
.box .small{
width: 100px;
height: 100px;
background-color: #f00;
position: absolute;
left: 0;
top: 0;bottom: 0;
right: 0;
margin: auto;
transition: all 3s;
}
.box:hover .small{
/* z轴平移,正数表示距离实现更近 */
/* transform: translateZ(-300px); */
/* x轴平移,正数向右 */
/* transform: translateX(100px); */
/* y轴平移,正数向下 */
/* transform: translateY(100px); */
/* x轴旋转,正角度向后倒 */
/* transform: rotateX(45deg); */
/* y轴旋转,正角度右边向后 */
/* transform: rotateY(45deg); */
/* 正角度右边向下 */
/* transform: rotateZ(45deg); */
}
</style>
<div class="box">
<div class="small"></div>
</div>
动画、
定义动画、
@keyframes 动画名称{
/* 元素初始状态 */
from{ /* from也可以写为0% */
/* 元素第一个关键帧样式 */
}
/* 动画执行到某个比例 - 关键帧 */
percent{ /* 中间的percent,指的是动画执行到某个百分比,例如50%,可以写多个关键帧 */
/* 某个关键帧的的样式 */
}
/* 动画结束的样式 */
to{ /* to也可以写为100% */
/* 最后一个关键帧样式 */
}
}
使用动画、
animation: 动画名称 动画需要的时长 速度方式 延迟时间 infinite/次数 是否反向运动 动画结束是否停留在结束位置; /* 复合写法 */
/* 单一写法 */
animation-name: 定义好的动画名称;
animation-duration: 动画所需的时长; /* 单位可以是s秒,也可以是ms毫秒 -- 1s = 1000ms */
animation-timing-function: 速度方式;
animation-delay: 延迟的时间;
animation-iteration-count: 播放次数(数字)或infinite(无限次);
animation-direction: normal/alternate; /* normal表示正向播放,alternate表示第一次正向播放,第二次就是反向播放,第三次又是正向播放 */
animation-fill-mode: forwards/none; /* 动画停在最后一帧或开始位置 */
animation-play-state: paused/running; /* 规定动画正在运行或暂停,默认为running */
例、
<style>
/* 定义动画 */
/* @keyframes 哈哈{ */
/* 定义关键帧 */
/* 初始位置 */
/* 0%{ css样式 } */
/* from{ css样式 } */
/* 中间的关键帧 - 使用百分比 */
/* 50%{} */
/* 结束位置 */
/* 100%{} */
/* to{} */
/* } */
.box{
width: 800px;
height: 300px;
border: 1px solid #000;
}
.small{
width: 100px;
height: 100px;
background-color: #f00;
margin-top: 100px;
animation: wid 3s infinite alternate;
}
@keyframes wid{
to{
margin-left: 650px;
transform: scale(2) rotate(720deg);
}
}
.box:hover .small{
/* 使用动画 */
/* animation: 动画名称 需要的时长; */
/* animation: xuanzhuan 5s; */
/* 指定动画名称 */
/* animation-name: wid; (动画名称中英文都可以)*/
/* 指定动画时长 */
/* animation-duration: 5s; */
/* animation-duration: 1s; */
/* 指定速度方式 */
/* animation-timing-function: linear; */
/* 指定延迟的时间 */
/* animation-delay: 2s; */
/* 指定动画执行的次数 */
/* animation-iteration-count: 1; */
/* animation-iteration-count: infinite; */
/* 指定动画的执行方向:direction */
/* animation-direction: alternate; */
/*
normal:正方向执行结束后重新回到原点重新开始
alternate:正方向执行结束,会反方向动画回来
*/
/* 设置标签元素动画结束后是否停在开始位置或结束位置 */
/* animation-fill-mode: none; */
/*
forwards让标签元素停留在动画结束位置
none动画结束后元素回到初始位置
*/
/* 设置动画是运行还是停止 */
animation-play-state: paused;
}
</style>
<div class="box">
<div class="small"></div>
</div>