<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*取消默认样式*/
*{
margin: 0;
padding: 0;
}
.cube{
/*设置盒子整体大小*/
width: 500px;
height: 500px;
/*居中显示*/
margin: 150px auto;
/* 设置成3D效果*/
transform-style: preserve-3d;
/*调用关键帧 - 完成一圈时长30S - 循环*/
animation: rotate 30s infinite linear;
}
@keyframes rotate {
form{
transform: rotateX(0) rotateZ(0);
}
to{
transform: rotateX(1turn) rotateZ(1turn);
}
}
/*子元素div*/
.cube > div{
width: 500px;
height: 500px;
opacity: 0.7;
position: absolute;
}
img{
width: 500px;
height: 500px;
}
.box1{
/*Y轴 旋转90°*/
transform: rotateY(90deg) translateZ(250px);
}
.box2{
/*Y轴 旋转-90°*/
transform: rotateY(-90deg) translateZ(250px);
}
/*以上两个完成左右面*/
.box3{
/*X轴 旋转90°*/
transform: rotateX(90deg) translateZ(250px);
}
.box4{
/*X轴 旋转-90°*/
transform: rotateX(-90deg) translateZ(250px);
}
/*以上两个完成上下面*/
.box5{
/*往正面前进 -- 正面*/
transform: translateZ(250px);
}
.box6{
/*旋转180° - 旋转到背面*/
transform: rotateY(180deg) translateZ(250px);
}
</style>
</head>
<body>
<div class="cube">
<div class="box1">
<img src="../images/1.jpg" alt="">
</div>
<div class="box2">
<img src="../images/2.jpg" alt="">
</div>
<div class="box3">
<img src="../images/3.jpg" alt="">
</div>
<div class="box4">
<img src="../images/4.jpg" alt="">
</div>
<div class="box5">
<img src="../images/5.jpg" alt="">
</div>
<div class="box6">
<img src="../images/6.jpg" alt="">
</div>
</div>
</body>
</html>
CSS3技术完成骰子动画
该博客展示了一个使用HTML、CSS和关键帧动画实现的3D立方体图片轮播效果。通过CSS3的transform属性,创建了一个在X轴和Y轴上旋转的立方体,每个面展示不同的图片,实现了视觉上的3D翻转效果。动画以30秒为周期,无限循环,提供了一种动态展示多张图片的方式。
摘要由CSDN通过智能技术生成