效果图：

index.html代码：

<!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><link rel="stylesheet" href="index.css">
</head>
<body><div class="container"><!-- 前面 --><div class="item front"><img src="./1.jpg" width="100%" alt="大乔"></div><!-- 后面 --><div class="item back"><img src="./2.jpg" width="100%" alt="小乔"></div><!-- 左面 --><div class="item left"><img src="./3.jpg" width="100%" alt="西施"></div><!-- 右面 --><div class="item right"><img src="./4.jpg" width="100%" alt="王昭君"></div><!-- 上面 --><div class="item top"><img src="./5.jpg" width="100%" alt="杨玉环"></div><!-- 下面 --><div class="item bottom"><img src="./6.jpg" width="100%" alt="貂蝉"></div></div></body>
</html>

index.css代码：

*{margin: 0;padding: 0;box-sizing: border-box;
}body{/* vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。 */height: 100vh;display: flex;justify-content: center;align-items: center;background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}.container{width: 300px;height: 300px;position: relative;/* 3D样式 */transform-style: preserve-3d;/* 周期为10S，linear表示以恒定速度，alternate表示动画交替反向运行，infinite表示无限循环播放动画 */animation: rotate 10s linear alternate infinite;
}.container .item{position: absolute;width: 100%;height: 100%;}.container .front{transform: translateZ(150px);
}.container .back{transform: rotateY(180deg) translateZ(150px);
}.container .left{transform: rotateY(-90deg) translateZ(150px);
}.container .right{transform: rotateY(90deg) translateZ(150px);
}.container .top{transform: rotateX(90deg) translateZ(150px);
}.container .bottom{transform: rotateX(-90deg) translateZ(150px);
}
/* 立方体旋转顺序：右后左上前下*/
@keyframes rotate{0%,5%{transform: rotateY(-90deg);}19%,24%{transform: rotateY(-180deg);}38%,43%{transform: rotateY(-270deg);}57%,62%{transform: rotateX(-90deg);}76%,81%{transform: rotateX(0);}95%,100%{transform: rotateX(90deg);}
}

用HTML和CSS制作一个带图片的旋转立方体相关推荐

用 CSS 画一个带阴影的三角形
1. 思路怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
HTML5 + CSS制作一个网络照片墙
使用HTML5 + CSS制作一个照片墙是不难的,在大学里可以当作业交了,这是效果: 这个是有动画的,具体的效果在这个网站的home页,Welcome的源码参考了用html做一个漂亮的网站,个人网页, ...
手把手教你制作一个带特效的全景图片
一个好的产品才会令人印象深刻,全景图也是这样.这篇文章教你制作一个带特效的全景图片,让你的全景图片"靓"起来. 第一步.准备一张2:1的全景图片.如果不知道全景图是怎么制作的话,可 ...
[css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
HTML+CSS制作一个动画
HTML+CSS制作一个动画效果图如下: HTML部分结构如下: <!DOCTYPE html> <html lang="zh-Hans"><hea ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
制作一个带rEFInd引导菜单的WinPE启动光盘
制作一个带rEFInd引导菜单的WinPE启动光盘制作UEFI格式的启动光盘要比U盘难很多. UEFI模式Windows的bootmgr只能从UDF格式光盘引导,而rEFInd并不支持从UDF格式光 ...
九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作先不管通过网页访问这一项,先写一 ...

用HTML和CSS制作一个带图片的旋转立方体

效果图：

index.html代码：

index.css代码：

用HTML和CSS制作一个带图片的旋转立方体相关推荐

最新文章

热门文章