<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D动画旋转</title>
<style>
body
{
height: 100%;
display: flex;
/*水平方向上居中*/
justify-content: center;
/*竖直方向上居中*/
align-items: center;
/*设置观看距离*/
perspective: 1000px;
background-color: black;
}
main{
/*margin: 50px auto;*/
width: 300px;
height: 300px;
border: 2px solid red;
/*preserve 保留
保留元素在3D模型中的位置*/
transform-style: preserve-3d;
/*名字叫转 持续时间是10秒 匀速 无限循环*/
animation: zhuan 10s linear infinite;
}
div{
width: 100%;
height: 100%;
/*设置图片的大小为当前标签的大小*/
position: absolute;
border-radius: 10px;
opacity: 0.7;
box-shadow: 0 0 300px red;
text-align: center;
}
#front
{
transform: translateZ(160px);
}
#back
{
transform: translateZ(-160px);
}
#top
{
transform: rotateX(90deg) translateZ(160px);
}
#bottom
{
transform: rotateX(90deg) translateZ(-160px);
}
#right
{
transform: rotateY(90deg) translateZ(160px);
}
#left
{
transform: rotateY(90deg) translateZ(-160px);
}
@keyframes zhuan
{
0%
{
动画开始的时候X轴旋转0度Y轴旋转0度
transform: rotateX(0deg) rotateY(0deg);
}
100%
{
/*动画结束的时候X轴旋转360度Y轴旋转360度*/
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<main>
<div id="front"></div>
<div id="back"></div>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
</main>
</body>
</html>
转载于:https://my.oschina.net/u/3382800/blog/873328