利用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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 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
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php获取文件大小的方法
2014/02/26 PHP
万能的php分页类
2017/07/06 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python实现求特征选择的信息增益
2018/12/18 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
六道php面试题附答案
2014/06/05 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
高考励志标语
2014/06/05 职场文书
七夕情人节促销方案
2014/06/07 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
中班教师个人总结
2015/02/05 职场文书
清洁工岗位职责
2015/02/13 职场文书
财务人员入职担保书
2015/09/22 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS