今天我们来做一个炫一点的3D动画效果，动画效果是C3中新增的属性，今天这个效果很适合我们平时娱乐时做，如果你觉得效果太单调也可以自行添加一些其他特效哦，以下图片也可以替换成自己的图片哦
这个视屏就是动画的效果哦
Video_2020-12-26
HTML布局
html的布局结构简单，下面就不做过多的解释了，其代码如下：
<div class="container">
<div class="box1 a"></div>
<div class="box2 a"></div>
<div class="box3 a"></div>
<div class="box4 a"></div>
<div class="box5 a"></div>
<div class="box6 a"></div>
<div class="small">
<div class="pox1 b"></div>
<div class="pox2 b"></div>
<div class="pox3 b"></div>
<div class="pox4 b"></div>
<div class="pox5 b"></div>
<div class="pox6 b"></div>
</div>
</div>
CSS代码如下
<style>
* {
padding: 0;
margin: 0;
}
/* 外面大盒子容器 */
.container {
width: 500px;
height: 500px;
margin: 500px auto;
position: relative;
/* 3d视图效果 */
transform-style: preserve-3d;
perspective: 1000px;
}
/* 大盒子公共属性设置 */
.a {
width: 500px;
height: 500px;
position: absolute;
/* 透明度为0.8 */
opacity: .8;
}
/* 里面的小容器 */
.small {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
left: 150px;
top: 150px;
}
/* 小容器里的图片公共样式 */
.b {
width: 200px;
height: 200px;
position: absolute;
opacity: .8;
}
/* 此为正面图片,不旋转,沿着Z轴向前动盒子一半的宽度即250px */
.box1 {
background-image: url(./images/1.jpg);
transform: rotateX(0deg) translateZ(250px);
}
/* 此为后面图片,沿着Z轴向前移动盒子一半的宽度即250px，沿X轴旋转180度， */
.box2 {
background-image: url(./images/2.jpg);
transform: rotateX(180deg) translateZ(250px);
}
/* 此为右面的图片，,沿着Z轴向前移动盒子一半的宽度即250px,沿Y轴转90度， */
.box3 {
background-image: url(./images/3.jpg);
transform: rotateY(90deg) translateZ(250px);
}
/* 此为左面的图片，,沿着Z轴向前移动盒子一半的宽度即250px,沿Y轴转90度， */
.box4 {
background-image: url(./images/7.jpg);
transform: rotateY(-90deg) translateZ(250px);
}
/* 此为上面的图片，,沿着Z轴向前移动盒子一半的宽度即250px,沿Y轴转90度， */
.box5 {
background-image: url(./images/8.jpg);
transform: rotateX(90deg) translateZ(250px);
}
/* 此为下面的图片，,沿着Z轴向前移动盒子一半的宽度即250px,沿Y轴转90度， */
.box6 {
background-image: url(./images/6.jpg);
transform: rotateX(-90deg) translateZ(250px);
}
/* 小盒子原理与大盒子原理相同 */
.pox1 {
background-image: url(./images/01.jpg);
transform: rotateX(0deg) translateZ(100px);
}
.pox2 {
background-image: url(./images/02.jpg);
transform: rotateX(180deg) translateZ(100px);
}
.pox3 {
background-image: url(./images/03.jpg);
transform: rotateY(90deg) translateZ(100px);
}
.pox4 {
background-image: url(./images/04.jpg);
transform: rotateY(-90deg) translateZ(100px);
}
.pox5 {
background-image: url(./images/05.jpg);
transform: rotateX(90deg) translateZ(100px);
}
.pox6 {
background-image: url(./images/06.jpg);
transform: rotateX(-90deg) translateZ(100px);
}
.container {
/* 为大盒子开启动画效果，动画名称为go,
5秒完成一次，匀速转动，没有延迟，无数次 */
animation: go 5s linear 0s infinite;
}
.small {
/* 为小盒子开启动画效果，动画名称为go,
2秒完成一次，匀速转动，没有延迟，无数次 */
animation: go 2s linear 0s infinite;
}
@keyframes go {
0% {
transform: rotate3d(0.5, 0.5, -0.5, 0deg);
}
100% {
transform: rotate3d(0.5, 0.5, -0.5, 360deg);
}
}
/* 同上同上，只是鼠标经过时移动距离变大了 */
.container:hover .box1 {
transform: rotateX(0deg) translateZ(350px);
}
.container:hover .box2 {
transform: rotateX(180deg) translateZ(350px);
}
.container:hover .box3 {
transform: rotateY(90deg) translateZ(350px);
}
.container:hover .box4 {
transform: rotateY(-90deg) translateZ(350px);
}
.container:hover .box5 {
transform: rotateX(90deg) translateZ(350px);
}
.container:hover .box6 {
transform: rotateX(-90deg) translateZ(350px);
}
</style>
这样就完成了一个好看的动画效果了，快去发给你们的女朋友吧，哈哈哈！！！