3D转换
三维变换使用基于二维变换的相同属性，可以让我们基于三个坐标方向对元素进行变换。和二维变形一样，三维变形可以使用transform属性来设置
3D移动
translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)
3D缩影
scale3d(number,number,number)使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()
3D旋转
a) rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴
a) rotateX(angle) 是元素依照x轴旋转；
b) rotateY(angle) 是元素依照y轴旋转；
c) rotateZ(angle) 是元素依照z轴旋转
3D透视/景深效果
左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向
- perspective(length)
为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;
时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的
perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果 - perspective-origin 属性规定了镜头在平面上的位置，默认是放在元素的中心
- transform-style 使被转换的子元素保留其3D转换(需要设置在父元素中）
flat 子元素将不保留其3D位置——平面方式
preserve-3d 子元素将保留其3D位置——立体方式
尝试一下
body,html {
background: #222;
font-size: 22px;
color: rgb(18, 204, 250);
}
.page {
position: relative;
max-width: 640px;
width: 100%;
height: 100%;
margin: 0 auto;
background: #373737;
}
.cude{
position:absolute;
top:200px;
left:100px;
width: 100px;
-webkit-perspective: 1000px;
perspective: 1500px;
}
.dice {
position: absolute;
width: 300px;
height: 300px;
transform: rotateX(-15deg) rotateY(47deg);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: rotate 6s linear infinite alternate;
}
.dice .side {
position: absolute;
display: block;
width: 50px;
height: 50px;
background: rgba(241, 160, 8,.4);
text-align: center;
line-height:300px;
color:#fff;
font-size:40px;
font-weight: bold;
border:1px solid orange;
animation: move 6s linear infinite alternate-reverse;
}
.front{
transform:translateZ(150px);
}
.top{
transform: rotateX(90deg) translateZ(150px);
}
.bottom{
transform: rotateX(-90deg) translateZ(150px);
}
.left{
transform: rotateY(-90deg) translateZ(150px);
}
.right{
transform: rotateY(90deg) translateZ(150px);
}
.back{
transform: rotateY(-180deg) translateZ(150px);
}
@keyframes move {
0% {}
100% {
width: 300px;
height: 300px;
}
}
@keyframes rotate {
0%{
transform: rotate3d(0,0,0,0deg);
}
100% {
transform: rotate3d(45,45,45,720deg);
}
}
关键帧动画
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
- 必要元素
a. 通过@keyframes指定动画序列； 自动补间动画，确定两个点，系统会自动计算中间过程，这两个点就称为关键帧，可以设置多个关键帧
b. 通过百分比将动画序列分割成多个节点
c. 在各个节点中分别定义各属性
d. 通过animation将动画应用于相应元素 - animation常用属性
a. 动画序列的名称:animation-name: move;
b. 动画的持续时间:animation-duration: 1s;
c. 动画的延时:animation-delay: 1s;
d. 播放状态:animation-play-state: paused|running;
e. 播放速度:animation-timing-function: linear;
f. 播放次数 反复:animation-iteration-count: 1;
g. 动画播放完结后的状态:animation-fill-mode: forwards;
h. 循环播放时，交叉动画:animation-direction: alternate;
先来看个简单的demo
尝试一下
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 1100px;
height: 900px;
overflow: hidden;
animation: dropdown 6s linear infinite;
}
.container {
position: absolute;
left: 0;
width: 25300px;
height: inherit;
animation: move 2s steps(23) infinite ;
}
.container img {
float: left;
width: 1100px;
height: 900px;
}
@keyframes move{
to{
left: -25300px;
}
}
@keyframes dropdown{
0%{
top: -1900px;
}
40%,70%{
top: 0;
}
100%{
top: 1900px;
}
}
.txt {
position: absolute;
left: -236px;
width: 300px;
font-size: 48px;
color: orange;
text-shadow: 0 0 18px deeppink;
writing-mode: vertical-rl;
animation: gogogo 10s ease-in infinite;
}
@keyframes gogogo{
from{
top: -500px;
}
to{
top: 1000px;
}
}
.wrapper:before {
position: absolute;
left: 0;
z-index: 99;
content: "";
width: 8px;
height: 900px;
background: deepskyblue;
box-shadow: 0 0 10px 4px skyblue;
animation: line 6s infinite alternate;
}
.wrapper:after {
position: absolute;
right: 0;
z-index: 99;
content: "";
width: 8px;
height: 900px;
background: deepskyblue;
box-shadow: 0 0 10px 4px skyblue;
animation: line 6s infinite alternate;
}
@keyframes line{
from{
height: 0;
}
to{
height: 900px;
}
}
网友评论