前端练习——复仇者联盟

最新推荐文章于 2024-06-10 08:54:10 发布

啾比特

最新推荐文章于 2024-06-10 08:54:10 发布

阅读量604

点赞数

分类专栏： Java web

本文链接：https://blog.csdn.net/qq_46258819/article/details/107820332

版权

Java web 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

涉及的知识点：

1、animation动画
2、transform变形
3、perspective设置视距
4、rotateX() rotateY() rotateZ() 旋转
5、transform-style:preserve-3d设置3D变形效果

代码

html {
  perspective: 800px;
}
.cube {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  transform-style: preserve-3d;
  transform: rotateX(125deg) rotateZ(25deg);
  animation: rotate 20s linear infinite;
}
.cube > div {
  width: 200px;
  height: 200px;
  opacity: 0.7;
  position: absolute;
}
@keyframes rotate {
  from {
    transform: rotateX(0) rotateZ(0);
  }
  to {
    transform: rotateX(1turn) rotateZ(1turn);
  }
}
img {
  width: 200px;
  height: 200px;
}
.box1 {
  transform: rotateY(90deg) translateZ(100px);
}
.box2 {
  transform: rotateY(-90deg) translateZ(100px);
}
.box3 {
  transform: rotateX(90deg) translateZ(100px);
}
.box4 {
  transform: rotateX(-90deg) translateZ(100px);
}
.box5 {
  transform: rotateX(0) translateZ(100px);
}
.box6 {
  transform: rotateY(180deg) translateZ(100px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复仇者联盟</title>
    <link rel="stylesheet" href="重置样式表/reset.css">
    <link rel="stylesheet" href="练习-复联.css">
</head>
<body>
<!--创建外部容器-->
<div class="cube">
    <!--添加图片-->
    <div class="box1">
        <img src="复联img/1.jpg">
    </div>
    <div class="box2">
        <img src="复联img/2.jpg">
    </div>
    <div class="box3">
        <img src="复联img/3.jpg">
    </div>
    <div class="box4">
        <img src="复联img/4.jpg">
    </div>
    <div class="box5">
        <img src="复联img/5.jpg">
    </div>
    <div class="box6">
        <img src="复联img/6.jpg">
    </div>


</div>
</body>
</html>