利用CSS3制作简单的3d半透明立方体图片展示


Posted in HTML / CSS onMarch 25, 2017

效果图如下:

利用CSS3制作简单的3d半透明立方体图片展示

示例代码:

<html>
 <head>
 <title> new document </title>
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 <meta charset="utf-8"/>
 <style type="text/css">

//css部分
html{
	font-size:62.5%;
	}
	img{
	width:300px;
	height:300px;
	}
 #stage{

//搭建一个舞台
margin-top:200px;
	margin-left:auto;
	margin-right:auto;
	width:300px;
	height:300px;
	perspective:1200px;
	font-size:5em;
	font-weight:bold;
	color:#cc00ff;

}
 .cube{

//cube是正方体
position:relative;
	transform:rotateX(-45deg) rotateY(45deg);
	transform-style:preserve-3d;
	transition: all .6s;
 }
 .side{
	color:blue;
	text-align:center;
	width:300px;
	height:300px;
	line-height:300px;
	position:absolute;
	background:#cc66ff;
	opacity:0.5;
	border:1px solid rgba(117,4,24,0.5);

}

//.front到.bottom是6个面分别进行旋转,构建出正方体的整形
.front{
	transform:translateZ(150px);
	}
	.back{
	transform:rotateY(180deg) translateZ(150px);
	}
	.left{
	transform:rotateY(-90deg) translateZ(150px);
	}
	.right{
	transform:rotateY(90deg) translateZ(150px);
	}
	.top{
	transform:rotateX(90deg) translateZ(150px);
	}
	.bottom{
	transform:rotatex(-90deg) translateZ(150px);
	}
	#stage:hover .cube{

//设置鼠标移上正方体时是否需要过渡效果以及过渡效果开始和结束的时间和速度
transform:rotateX(-45deg) rotateY(225deg);
	transition:transform .6s;
	}
 </style>
 </head>


<body>
	<div id="stage">
	<div class="cube">
	<div class="side front"><img src="6.gif" alt="" /></div>
	<div class="side back"><img src="2.jpg" alt="" /></div>
	<div class="side left"><img src="3.jpg" alt="" /></div>
	<div class="side right"><img src="4.jpg" alt="" /></div>
	<div class="side top"><img src="5.jpg" alt="" /></div>
	<div class="side bottom"><img src="1.jpg" alt="" /></div>
	</div>
	</div>

 </body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 #HTML / CSS
CSS3实现头像旋转效果
Mar 13 #HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 #HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 #HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 #HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 #HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 #HTML / CSS
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
搜索引擎技术核心揭密
2006/10/09 PHP
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python 带时区的日期格式化操作
2020/10/23 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
学习党章思想汇报
2014/01/07 职场文书
社区工作者感言
2014/03/02 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Python实现简繁体转换
2021/06/07 Python
python 实现图片特效处理
2022/04/03 Python