css3 立体感的图片,CSS3 有“厚度”的立体图片效果

CSS

语言：

CSSSCSS

确定

body {

perspective: 1000px;

background: rgba(0, 0, 0, 0.1);

}

.imgWrap {

position: relative;

width: 70%;

margin: 5% auto;

padding-bottom: 31%;

transform: rotateY(25deg);

transform-style: preserve-3d;

}

.imgWrap > div {

position: absolute;

top: 0;

width: 30.3%;

height: 100%;

float: left;

background-image: url('/uploads/161001/normal4.jpg');

background-size: auto 100%;

transform-style: preserve-3d;

outline: 1px solid transparent;

/* prevent jagged edges in firefox */

}

.imgWrap .left {

left: 0;

background-position: 3% 0;

}

.imgWrap .center {

left: 34.83%;

background-position: -97% 0;

}

.imgWrap .right {

left: 69.66%;

background-position: -197% 0;

}

.imgWrap > div:before {

content: '';

position: absolute;

top: 0;

right: 100%;

width: 10%;

height: 100%;

background: inherit;

transform-origin: 100% 50%;

transform: rotateY(-90deg);

}

.imgWrap .left:before {

background-position: 0% 0;

}

.imgWrap .center:before {

background-position: -1001.3% 0;

}

.imgWrap .right:before {

background-position: -2001.4% 0;

}

.imgWrap > div:after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 150%;

transform-origin: 50% 100%;

transform: rotateX(-90deg);

background: rgba(0, 0, 0, 0.1);

}

css3 立体感的图片,CSS3 有“厚度”的立体图片效果相关推荐

三维立体图_原来三维立体图片是这样制作的，学会以后自己也可以设计
最近很多朋友私信问我,三维立体图片是怎么制作的呢?我今天就教教大家三维立体图的设计方法,以后大家也就可以自己设计了. 准备工具第一:3dmax设计软件和ps软件第二:三维立体图合成器首先这是设计 ...
HTML如何使用隐藏图片,css3如何隐藏图片？
css3隐藏图片的方法:1.为图片元素设置display:none;样式来隐藏.2.使用visibility:hidden;样式隐藏图片.3.使用opacity:0;样式通过设置图片完全透明来设置图片 ...
纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
CSS3实现图片超立体3D效果
我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图. 如何,看上去挺不错吧,倾斜.阴影,让 ...
html为荣围绕图片,CSS3实现图片围绕DIV元素的边框效果
本篇文章介绍CSS3实现用图片围绕DIV边框的效果,使用的时候注意浏览器兼容情况,希望对你有所帮助. 浏览器支持: Internet Explorer 11, Firefox, Opera 15, C ...
html背景幻灯片图片,CSS3全屏背景图像幻灯片
我们将使用一个无序列表的幻灯片,我们会添加一个跨度为每个图像和一个标题: Image 01 re·lax·a·tion 让我们首先定义无序列表的样式.这将是固定的.我们还将使用:在伪元素以地方模式的图 ...
HTML5+CSS3 鼠标悬停3D立体图片效果
效果图: 设置一个盒子,里面放两个div. 2.div旋转并设阴影. 3.加伪类,使鼠标移入这个盒子的时候div有动画效果. 这样就完成应该是一个鼠标悬停立体图片的效果.
html排列图片,css3+html实现微信朋友圈不同尺寸图片排列预览功能
css 模拟朋友图片不同数量排列,html 图片排列,微信朋友圈css img 自适应,微信朋友圈照片排列,vue 朋友圈图片预览,微信朋友圈缩略框尺寸,朋友圈图片尺寸,新版微信朋友圈图片大小 ht ...

css3 立体感的图片,CSS3 有“厚度”的立体图片效果

css3 立体感的图片,CSS3 有“厚度”的立体图片效果相关推荐

最新文章

热门文章