利用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色彩
Jan 16 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
php的大小写敏感问题整理
2011/12/29 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
js实现网页收藏功能
2015/12/17 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
原材料检验岗位职责
2014/03/15 职场文书
课外科技活动总结
2014/08/27 职场文书
公司证明怎么写
2014/09/22 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2016新年晚会开场白
2015/12/03 职场文书
导游词之襄阳古城
2019/09/27 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS