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

最新推荐文章于 2021-08-03 22:47:16 发布
最新推荐文章于 2021-08-03 22:47:16 发布
阅读量727 收藏
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog.php?id=bc1i0i2cb&title=%E7%94%A8css3%E7%AE%80%E5%8D%95%E7%9A%84%E5%88%B6%E4%BD%9C3d%E5%8D%8A%E9%80%8F%E6%98%8E%E7%AB%8B%E6%96%B9%E4%BD%93%E5%9B%BE%E7%89%87%E5%B1%95%E7%A4%BA
版权

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

//div部分

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

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5制作的3D相册
07-11
在网上HTML5制作的3D相册，喜欢的朋友可以拿去。
html+css制作3D透明立体效果
weixin_47684422的博客
03-21 1699
今天给大家分享一下如何制作3D透明立体
css立方体效果,纯CSS3实现透明3D立方体旋转效果
weixin_35794316的博客
08-03 2679
一个立方体有六个面。所以，它的HTML结构应该是这样的(这里用Vue.js来实现)：拍岸的布落格为了便于理解，我们给每个面一个单独的class，好作区分，你也可以用cube__item:nth-of-type(1/2/3/4/5/6)这样的伪类来写。实现CSS3 3D效果的时候，有以下知识点必须理解清楚。1、perspective它用于设置三维透视的距离(perspective这个单词就是透视的意...
css3透明度过度,CSS透明半透明与transition过渡效果
weixin_30445963的博客
08-03 2268
一、CSS透明与半透明1、CSS3 整体透明opacity ： 1 ; 透明度filter : alpha( opacity = 100 ); 老旧浏览器IE8 -2、CSS3 颜色透明#RRGGBBrgb( 255, 255, 255)rgba( 255 , 255 , 255 , 1 ) alpha 透明度3、png图片二、transition 过渡(适用于数值变化 )【隐藏，显示标签】1、直...
网页特效：用CSS3制作3D图片立方体旋转特效
10-14 498
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> 6 7 <style type="text/css"&g...
利用CSS3制作简单的3d半透明立方体图片展示
12-13
效果图如下： 示例代码： <html> <head> <title> new document <...meta name="generator" content="editplus" />...style type="text/css"> //css部分 html{ font-size:62.5%;
CSS3-3D动画制作旋转立方体
01-20
3D动画是CSS3才有的属性，制作立方体的思路是使用6个正方形div，通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。 旋转后的面会变成新的X-Y面，旋转后Z轴和位移是对新的面来说的，不是原来的面来说的，...
CSS3制作3D图片立方体旋转特效特效代码
03-20
CSS3制作3D图片立方体旋转特效是一款鼠标触碰模块炸开，大立方体中套小立方体特效。
CSS 3D立方体制作
01-19
无需JavaScript, imagery, canvas 或者SVG，就可以利用最新的CSS制作出3D立方体，这的确是一件让人难以想象的事情。 目前制作出来的效果，只有Firefox 3.5，Safari 3.2+，Google Chorme支持。下面来为大家列举出相关...
纯css3实现3D立方体图片展示
袁成新（Chauncey Yuan）
01-04 720
大致效果 原图下载地址 css html { height: 100%; } body { height: 100%; margin: 0; perspective: 2000px; perspective-origin: 100px 100px; transform-style: preserve-3d; } @keyframes roun...
CSS3实现的3D透视特效源码.zip
07-04
CSS3实现的3D透视特效源码是一段实现了3D透视效果查看内容的代码，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。
HTML5绘制3D魔方旋转动画.rar
05-27
HTML5绘制3D魔方旋转动画，纯CSS3绘制。
将页面内搜索结果高亮显示（使用mark.js），且页面顶部定位到第一个搜索结果
duansamve的博客
11-05 1011
<!DOCTYPE> <html> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /&gt...
如何用Javascript获取HTML的第二列第三个单元格的内容？
11-21 1030
方法有好多了，二楼的也是一种 还有其他方法，示例如下 New Document function getValue() { //取表格 var table1 = document.getElementById("table1"); //方法1： var v1 = table1.firstChild.child
纯css耍个透明正方体转一转
dingxing4029的博客
09-20 103
效果 效果图如下 ​ 实现思路 定义一个最外层的容器，用来控制显示的位置 定义一个父容器，用来设置元素被查看位置的视图，这里使用到CSS3的perspective 属性 定义子容器，设置为相对定位，利用transform-style属性，使被转换的子元素保留其 3D 转换 定义6个div，构成正方体的6个面 dom结构 按照实现思路，我们需要如下的dom...
简单CSS绘制３D贺卡
富尔牛的博客
03-28 851
如何利用CSS绘制一些简单却又炫酷的３D效果呢？ 首先上图 这是一张单纯用CSS实现的３D贺卡，下面一起来看一下事如何实现的： １．ｈｔｍｌ代码 Niu 嗯~ o(*￣▽￣*)o，就这？？？ ２．ＣＳＳ代码 ａ．清除默认样式，以及设置ｂｏｄｙ全屏背景颜色 * { padding: 0; margin: 0; } body { display: flex; justify-con
three.js设置透明几何体
qq_41713136的博客
03-05 2096
1、实现效果 2、实现
HTM+CSS实现立方体图片旋转展示效果
icee
08-02 1641
目的：HTM+CSS实现立方体图片旋转展示效果 环境： 系统：Win10 环境： 一、示例1。 话不多说直接上代码 <html> <head> <style> /*立方体效果*/ .wrap { width: 120px; height: 200px; margin: 20px; position: fixed; ...
企业管理-14狼性精神企业文化.pptx
最新发布
06-14
企业管理-14狼性精神企业文化.pptx
jquery超级炫酷大气雪花背景3d立方体图片相册展示特效代码
08-03
恕我无法提供代码，但我可以简单介绍一下使用jQuery实现超级炫酷大气雪花背景3D立方体图片相册展示特效的方法。 首先，你需要将雪花背景的图片准备好，可以是一个带有透明背景的雪花图片。 接着，在HTML文件中创建一个div元素，作为相册展示的容器。可以给这个div元素设置一个固定的宽度和高度。 在CSS文件中，设置这个容器div的样式，可以使用`position: relative`使其相对定位，并设置一个合适的宽度和高度。 在JavaScript文件中，使用jQuery选择器选中这个容器div，并使用`mouseenter()`和`mouseleave()`事件处理函数来监听鼠标移入和移出事件。 在鼠标移入事件中，使用`animate()`函数实现3D立方体的翻转效果，可以通过设置`transform`属性来实现翻转。可以使用透明度的渐变效果使得翻转过程更加平滑。 在鼠标移出事件中，通过设置`transform`属性恢复到原来的状态。 最后，你可以将这段代码插入到你的网页中，即可实现一个炫酷大气的雪花背景3D立方体图片相册展示特效。 希望这些简单的介绍能给你提供一些参考。如果需要详细的代码实现，建议你在搜索引擎中搜索相关的教程和示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值