涉及的知识点：

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>

效果

前端练习——复仇者联盟相关推荐

前端判断是否安装桌面应用_前端开发人员的桌面应用神器 Electron
01 为什么用 JavaScript 来开发桌面应用? 曾经的 JavaScript 脆弱.简陋.甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScr ...
尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
java web打包神器_前端开发人员的桌面应用神器 Electron
原标题:前端开发人员的桌面应用神器 Electron 01 为什么用 Java 来开发桌面应用? 曾经的 Java 脆弱.简陋.甚至有被边缘化的危险,不过 Java 在经过了两次飞跃后(以 V8 为首 ...
前端开发人员的桌面应用神器 Electron
01 为什么用 JavaScript 来开发桌面应用? 曾经的 JavaScript 脆弱.简陋.甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScr ...
【Web前端学习系列01】—HTML
[Web前端学习系列01]-HTML HTML 基本标签-head head title标签 meta标签 link标签 style标签 script标签 base标签文本标题标签 h 段落标签 ...
javaWeb前端网页课程设计的实现——【JAVA篇】
文章目录环境配置一.web课程设计总体概述 1.头部 2.脖子 3.身体 4.尾部三.具体功能 1.时钟 2.超链接到其他页面 3.压缩包下载 4.音乐播放器 5.视频播放器 6.其他功能三. ...
前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
文章目录前言后端 && 前端的部分历史 - java 关于网站搭建正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧浏览器的开发者工 ...
HTML5期末大作业【红色的电影售票平台网站】web前端 html+css+javascript网页设计实例企业网站制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
《复仇者联盟》品牌决定价值
说到最新的电影,大家应该能异口同声说到刚刚上映的好莱坞大片<复仇者联盟>.这部电影横扫全球电影市场,总票房已高达6.54亿美元.5日该片登陆国内影院,首周末的票房达1.14亿元(约合180 ...

前端练习——复仇者联盟

涉及的知识点：

代码

效果

前端练习——复仇者联盟相关推荐

最新文章

热门文章