css过渡和3d动画详解及案例

上一篇文章已经具体介绍了css过渡的语法和用途，本文将介绍3d与过渡的结合的具体使用。

可以做出各种好看的3D动态效果

回顾一下，过渡的语法：简写：transition:all/具体属性值运动时间s/ms 延迟时间s/ms 动画类型

案例效果图如下（实现代码在下方）：

3D

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

实现3D场景

transform-style属性

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d；

其默认值为flat，即为2D空间。

3D位移

　　CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；

translate3d(tx,ty,tz)
- ty：代表纵向坐标位移向量的长度；
- tx：代表横向坐标位移向量的长度；
- tz：代表Z轴位移向量的长度。此值不能是一个百分比值，如果取值为百分比值，将会认为无效值。
translateZ(t)
- 指的是Z轴的向量位移长度。

3D旋转

　　CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；

rotateX(a)
- rotateX()函数指定一个元素围绕X轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕X轴逆时针旋转。
rotateY(a)
- rotateY()函数指定一个元素围绕Y轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕Y轴顺时针旋转；反之，如果值为负值，元素围绕Y轴逆时针旋转。
rotateZ(a)
- rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转

3D缩放

　　 3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；

scale3d()
- sx：横向缩放比例；
- sy：纵向缩放比例；
- sz：Z轴缩放比例；
scaleZ(s)
- s：指定元素每个点在Z轴的比例。
注：scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果

附上案例代码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html,body{

100%;

height: 100%;

}

.big_box{

300px;

height: 300px;

margin: 150px auto;

position: relative;

background: url(./images/1.jpg) center;

transform-style: preserve-3d;

animation: boxMore 7s linear infinite;

}

.box{

300px;

height: 300px;

line-height: 300px;

text-align: center;

font-size: 40px;

font-weight: bold;

color: #fff;

position: absolute;

top: 0;

}

.box1{

background-color: rgba(0, 200, 200, .6);

transform: translateZ(150px);

}

.box2{

background-color: rgba(200, 200, 0, .6);

transform: translateZ(-150px) rotateY(180deg);

}

.box3{

background-color: rgba(100, 100, 0, .6);

transform: translateY(-150px) rotateX(90deg);

}

.box4{

background-color: rgba(100, 100, 100, .6);

transform: translateY(150px) rotateX(-90deg);

}

.box5{

background-color: rgba(100, 100, 0, .6);

transform: translateX(150px) rotateY(90deg);

}

.box6{

background-color: rgba(100, 200, 0, .6);

transform: translateX(-150px) rotateY(-90deg);

}

@keyframes boxMore {

0%{

transform: rotateX(0deg) rotateY(0deg);

}

25%{

transform: rotateX(90deg) rotateY(30deg);

}

50%{

transform: rotateX(180deg) rotateY(0deg);

}

75%{

transform: rotateX(270deg) rotateY(-30deg);

}

100%{

transform: rotateX(360deg) rotateY(0deg);

}

</style>

</head>

<body>

</div>

</body>

</html>

如果感觉对自己有帮助，麻烦点一下关注，会一直盒大家分享知识的，谢谢！！！