Today we are going to make a dazzling 3D animation effect. The animation effect is a new attribute in C3. Today this effect is very suitable for our usual entertainment. If you think the effect is too monotonous, you can add some other special effects by yourself, the following picture You can also replace it with your own picture
This video is the effect of animation
Video_2020-12-26
HTML layout
The layout structure of html is simple, so I won't do too much explanation below, and the code is as follows:
<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>
The CSS code is as follows
<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>
This completes a nice animation effect. Go and send it to your girlfriends, hahaha! ! !