CSS/HTML制作在网页中持续旋转的六面体

注：
更改图片路径即可实现重新引用

效果图：

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复仇者联盟</title><link rel="stylesheet" href="./css/reset.css"><style>html{perspective: 1000px;}.cube{width: 200px;height: 200px;position: relative;margin: 200px auto;/* 设置3d变形效果 */transform-style: preserve-3d;transform: rotateY(45deg) rotateX(45deg);/* background-color: rosybrown; */animation: run 2s linear infinite;}.cube div{width: 200px;height: 200px;/* 设置元素透明度 */opacity: 0.7;position: absolute;}.cube .box1{transform: rotateY(-90deg) translateZ(100px); }.cube .box2{transform: rotateY(90deg) translateZ(100px);}.box3{transform: rotateY(180deg) translateZ(100px);}.cube .box4{transform: rotateX(90deg) translateZ(100px);}.cube .box5{transform: rotateX(-90deg) translateZ(100px);}.box6{transform: translateZ(100px);}@keyframes run{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}</style>
</head>
<body><div class="cube"><div class="box1"><img src="./img/14/1.jpg" alt=""></div><div class="box2"><img src="./img/14/2.jpg" alt=""></div><div class="box3"><img src="./img/14/3.jpg" alt=""></div><div class="box4"><img src="./img/14/4.jpg" alt=""></div><div class="box5"><img src="./img/14/5.jpg" alt=""></div><div class="box6"><img src="./img/14/6.jpg" alt=""></div></div>
</body>
</html>

积跬步，至千里！加油，学习人！

CSS/HTML制作在网页中持续旋转的六面体相关推荐

网页中图片旋转的几种实现方式
网页中图片旋转一般有下面三种常见的实现方式: 一. ie 滤镜 IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角.rota ...
CSS/HTML 如何在网页中添加空格(琐碎知识点整理)
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
基于HTML+CSS+JavaScript制作学生网页——龙猫 -宫崎骏 5页带轮播带js校验
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
基于HTML+CSS+JavaScript制作学生网页——外卖服务平台10页带js 带购物车
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 ...
基于HTML+CSS+JavaScript制作学生网页——海贼王网站 4页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
如何在制作的网页中加入google地图
http://i.mtime.com/5667366/blog/6875975/ Google Maps JavaScript API V3 教程注意:以下网页中提到的 Google Maps Ja ...
中秋之美——html+css+js制作中秋网页
前言八月十五,秋已过半,是为中秋. "但愿人长久,千里共婵娟",中秋时节,气温已凉未寒,天高气爽,月朗中天,正是观赏月亮的最佳时令.古人把圆月视为团圆的象征,因此,又称八月十五为 ...
css选择器制作一个网页,CSS选择器和做网页思路
这节要做出以下效果的网页其实,做网页就像画画一样,要分为一个一个的区域制作当把基本的区域确定好后,我们才能开始制作网页拿我们今天要做的这种个网页为例,我们可以先把它分为三个区域分别为蓝绿黄区域 ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
基于HTML+CSS+JavaScript制作学生网页——斗破苍穹动漫(6页) 排版整洁，内容丰富，主题鲜明
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...

CSS/HTML制作在网页中持续旋转的六面体

CSS/HTML制作在网页中持续旋转的六面体相关推荐

最新文章

热门文章