利用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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
js计算精度问题小结
2013/04/22 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Python中的高级数据结构详解
2015/03/27 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python如何基于redis实现ip代理池
2020/01/17 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
水果超市创业计划书
2014/01/27 职场文书
家长给小学生的评语
2014/01/30 职场文书
采购经理岗位职责
2014/02/16 职场文书
洗车工岗位职责
2014/03/15 职场文书
消防标语大全
2014/06/07 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
工作检讨书大全
2015/01/26 职场文书
学习计划是什么
2019/04/30 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
Nginx配置使用详解
2022/07/07 Servers