星空网 > 软件开发 > 网页设计

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

//div部分

<body>
<div id="stage">
<div >
<div ><img src='/images/loading.gif' data-original="6.gif" /></div>
<div ><img src='/images/loading.gif' data-original="2.jpg" /></div>
<div ><img src='/images/loading.gif' data-original="3.jpg" /></div>
<div ><img src='/images/loading.gif' data-original="4.jpg" /></div>
<div ><img src='/images/loading.gif' data-original="5.jpg" /></div>
<div ><img src='/images/loading.gif' data-original="1.jpg" /></div>
</div>
</div>

</body>
</html>




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

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊又有新动作,卖家:坚决不走小货代了:https://www.ikjzd.com/articles/1679689816682995713
出海品牌 Eyekeeper 如何打造高分眼镜垂类新站?:https://www.ikjzd.com/articles/1679694847041806337
收藏:6个实用的服装批发商的数字营销渠道!:https://www.ikjzd.com/articles/16797
吸粉230万,19岁小伙卖解压玩具成功赚到百万美金:https://www.ikjzd.com/articles/1679725370854285314
“全托管”狂潮来袭,自运营卖家如何破卷而出?:https://www.ikjzd.com/articles/1679736277672685569
什么是IP泄露?如何防止本机IP泄露?:https://www.ikjzd.com/articles/1679752729020624898
14点聊电商:重庆品胜科技与星苹台达成合作 助力部队现代化后勤建设 :https://www.kjdsnews.com/a/1836536.html
字节跳动辟谣!TikTok收紧美国开店政策为不实信息:https://www.kjdsnews.com/a/1836537.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流