css旋转立方体

最新推荐文章于 2022-05-14 21:48:41 发布

好友动态

最新推荐文章于 2022-05-14 21:48:41 发布

阅读量94

点赞数

文章标签： html css3 css

本文链接：https://blog.csdn.net/iostreamM/article/details/121363715

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转立方体</title>
    <style>
        .stage{
  position: relative;
  perspective: 800px;
}
@keyframes rotate-frame{
	0% {
		transform: rotateX(0deg);
	}
	25% {
		transform: rotateX(180deg);
	}
	50% {
		transform: rotateX(360deg) rotateY(0deg);
	}
	75% {
		transform: rotateX(360deg) rotateY(180deg);
	}		
	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}
.container{
	width: 450px;
	height: 450px;
	transform-style:preserve-3d;
  animation: rotate-frame 8s infinite linear;
  transform-origin: 50% 50% 75px;
  /*background: yellow;   容器屏幕背景色*/
}
.side{
  width: 150px;
  height: 150px;
  position: absolute;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
  text-align: center;
  line-height: 150px;
}
.top{
  left: 150px;
  top: 0;
  transform: rotateX(-90deg);
  transform-origin: bottom;
}
.bottom{
  left: 150px;
  top: 300px;
  transform: rotateX(90deg);
  transform-origin: top;
}
.left{
  left: 0;
  top: 150px;
  transform: rotateY(90deg);
  transform-origin: right;
}
.right{
  left: 300px;
  top: 150px;
  transform: rotateY(-90deg);
  transform-origin: left;
}
.front{
  left: 150px;
  top: 150px;
  transform: translateZ(150px);
}
.back{
  left: 150px;
  top: 150px;
}
img{
    width: 150px;
    height: 150px;
}
    </style>
</head>
<body>
    <div class="stage">
        <div class="container">
          <div class="side top"><img src="图/mirror.JPG" alt="">  </div>
          <div class="side bottom"><img src="图/Prada.JPG" alt=""></div>
          <div class="side left"><img src="图/sleep.JPG" alt=""></div>
          <div class="side right"><img src="图/eat.JPG" alt=""></div>
          <div class="side front"><img src="图/read.JPG" alt=""></div>
          <div class="side back"><img src="图/takeTheShower.JPG" alt=""></div>
        </div>
      </div>
</body>
</html>