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

效果图如下：

示例代码：

new document

//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;

}

总结

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

html 图片展示 3d,利用CSS3制作简单的3d半透明立方体图片展示相关推荐

html图片爆炸效果,利用CSS3制作3D图片爆炸效果
利用css3 transform和transition样式制作点击图片时图片爆炸开并切换到下一张图片依次循环首先先看一下效果图 Paste_Image.png 先描述一下大概思路: 布局时外面有一 ...
ZAM 3D 制作简单的3D字幕流程(二)
ZAM 3D 制作简单的3D字幕流程(二) 原文:ZAM 3D 制作简单的3D字幕流程(二) 原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表 ...
利用DW制作简单的LOGO / 以及对CSS选择器的了解
利用DW制作简单的LOGO 创建新的文件夹(Ctrl+shift+N) 了解CSS选择器 1.CSS选择器的分类其中第三种id选择器是用的最多的,今天我们也要用到id选择器. 2.CSS是什么呢? ...
利用PHP制作简单的内容采集器
利用PHP制作简单的内容采集器作者:yzxh24 阅读人次:-- 文章来源:天极论坛整理发布时间:2018/4/23 网友评论()条采集器,通常又叫小偷程序,主要是用 ...
利用PHP制作简单的内容采集器的原理分析
利用PHP制作简单的内容采集器的原理分析 2008-12-12 11:24 前几天做了个小说连载的程序,因为怕更新麻烦,顺带就写了个采集器,采集八路中文网的,功能比较简单,不能自定义规则,不过大概思路 ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
如何制作简单的 3D 打印模型
Hi 大家好! 了解一个方兴未艾,但极为有趣的话题 - 3D 打印 . 为了帮助大家对3D打印有一个初步的感性认识,我在线制作了一款可用于3D打印的model, 大家可以先通过体验这个在线 model ...
python爬虫图片-如何用Python来制作简单的爬虫，爬取到你想要的图片
原标题:如何用Python来制作简单的爬虫,爬取到你想要的图片在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材. 我 ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...

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

html 图片展示 3d,利用CSS3制作简单的3d半透明立方体图片展示相关推荐

最新文章

热门文章