利用css3做出立体折叠效果

最新推荐文章于 2022-08-11 18:15:17 发布

natalie86

最新推荐文章于 2022-08-11 18:15:17 发布

阅读量3.6k

点赞数

分类专栏： css 文章标签： css3

css 专栏收录该内容

61 篇文章 2 订阅

订阅专栏

原理介绍：
这种折叠效果是小编我在一个英文网站上学的，这个英文网站上的很多特效都很不错，推荐给你们进去看看，这个网站叫codrops
接下来正式简单介绍一下原理。折叠效果利用了css3里面的perspective 属性，这是一个3D画图里面的东西——透视；透视我就不具体介绍了，推荐一篇专门讲解perspective属性的文章——http://www.zhangxinxu.com/wordpr ... -animate-transition有了perspective这个属性的知识，再加上css3里面的渐变，我们就可一很轻易的打造各种立体效果了。

想要达到图上的折叠立体效果，我们的分析它是怎么用html布局的。从上图中可以看出，一张图片有五个部分，其中有四个部分是立起来的，呈现出立体效果。那么问题来了，要怎么样把一张图片分成五部分呢？其实这个不难，用background-postion定位就可以了，在这里我准备了五个div,每个idiv里的背景图通过定位，恰好能够拼成一张图片，而每部分的宽度都是等宽的，所以在利用background-postion属性时，X的值可以用图片的宽度除以5来确定，这里我用的图片宽度为640px;所以定位时，就有了如下代码：

.view .s1 {
background-position: 0px 0px;
}
.view .s2 {
background-position: -128px 0px;
}
.view .s3 {
background-position: -256px 0px;
}
.view .s4 {
background-position: -384px 0px;
}
.view .s5 {
background-position: -512px 0px;
}

复制代码

完成图片的布局之后，我们就可以给每个切片添加样式了。我选择了其中的四个切片，分别设置了translate3d和rotate3d这两个属性，设置方式可以看我贴的代码，不知道这两个属性怎么用的同学，可以深入研究一下上面推荐的文章。在这些都设置完了之后，你就可以看大折叠的立体效果了，不过有个问题，看起来不那么真实，所以，我又在每个切片的表层设置了一个span空元素，大小与一个切片一样大，并为其设置了linear-gradient线性渐变样式，使其中的一些切片具有阴影和反光效果，这样就更加真实了，具体设置方式可以参照下面的样式代码。
为了能够达到复用的效果，我将其封装成了一个插件，这样就可以直接应用到任何一张图片了。最后说一下，这是我第一次在这里发笔记，写的不是很好，望多多包涵，有问题的可以直接回复我，谢谢！

下面是图片的切割与布局

<div class="slice s1" style="background-image: url(image.jpg); ">
<span class="overlay"></span>
<div class="slice s2" style="background-image: url(image.jpg); ">
<span class="overlay"></span>
<div class="slice s3" style="background-image: url(image.jpg); ">
<span class="overlay"></span>
<div class="slice s4" style="background-image: url(image.jpg); ">
<span class="overlay"></span>
<div class="slice s5" style="background-image: url(image.jpg); ">
<span class="overlay"></span>
</div>
</div>
</div>
</div>
</div>

复制代码

jQuery3D折叠插件代码

$.fn.hoverfold = function( args ) {
this.each( function() {
$( this ).children( '.view' ).each( function() {
var $item = $( this ),
img = $item.children( 'img' ).attr( 'src' ),
struct = '<div class="slice s1">';
struct +='<div class="slice s2">';
struct +='<div class="slice s3">';
struct +='<div class="slice s4">';
struct +='<div class="slice s5">';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
var $struct = $( struct );
$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
});
});
};

复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Show me the Furry Friend of the Day</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style type="text/css">
*{padding:0;margin:0}
.header{width:100%;background:#000;height:50px;margin-bottom:20px;min-width:1000px}
/*图片折叠效果样式*/
.view{margin:20px auto;display:block;width:640px;height:400px;border: 8px solid #fff;background-color: #EEE;background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));-webkit-perspective: 800px;-moz-perspective: 800px;-o-perspective: 800px;-ms-perspective: 800px;perspective: 800px;position:relative;box-shadow: inset 0 0 0 .2em hsla(0,0%,0%,.1),
inset 0 0 2em hsla(0,0%,0%,.05),0 .2em .25em hsla(0,0%,0%,.5);}
.view .slice{
width:128px;
height: 100%;
z-index: 100;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 150ms ease-in-out;
-moz-transition: -moz-transform 150ms ease-in-out;
-o-transition: -o-transform 150ms ease-in-out;
-ms-transition: -ms-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;}
.view-back{
width: 50%;
height: 100%;
position: absolute;
right: 0;
background-color: rgb(0,255,255);
background-image: -webkit-linear-gradient(hsla(0,0%,0%,.025), hsla(0,0%,100%,.05) 33%, hsla(0,0%,0%,.05) 33%, hsla(0,0%,100%,.05) 67%, hsla(0,0%,0%,.05) 67%, hsla(0,0%,100%,.025));
z-index: 0;
}
.view .s2,
.view .s3,
.view .s4,
.view .s5 {
-webkit-transform: translate3d(128px,0,0);
-moz-transform: translate3d(128px,0,0);
-o-transform: translate3d(128px,0,0);
-ms-transform: translate3d(128px,0,0);
transform: translate3d(128px,0,0);
}
/*为每个切片设置背景图片位置*/
.view .s1 {
background-position: 0px 0px;
}
.view .s2 {
background-position: -128px 0px;
}
.view .s3 {
background-position: -256px 0px;
}
.view .s4 {
background-position: -384px 0px;
}
.view .s5 {
background-position: -512px 0px;
}
.view .overlay {
width: 128px;
height: 100%;
opacity: 0;
position: absolute;
-webkit-transition: opacity 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out;
-o-transition: opacity 150ms ease-in-out;
-ms-transition: opacity 150ms ease-in-out;
transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {
opacity: 1;
}
.view img {
position: absolute;
z-index: 0;
-webkit-transition: left 0.3s ease-in-out;
-o-transition: left 0.3s ease-in-out;
-moz-transition: left 0.3s ease-in-out;
-ms-transition: left 0.3s ease-in-out;
transition: left 0.3s ease-in-out;
}
.view:hover .s2{
-webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
-moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
-o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
-ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
transform: translate3d(127px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
-webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
-moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
-o-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
-ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
transform: translate3d(127px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
-webkit-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
-moz-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
-o-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
-ms-transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
transform: translate3d(127px,0,0) rotate3d(0,1,0,-90deg);
}
/*为每个切片创建渐变效果*/
.view .s1 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.view .s2 > .overlay {
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.view .s3 > .overlay {
background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}
.view .s4 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}
.view .s5 > .overlay {
background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
</style>
</head>
<body style="background:url(data/attachment/album/201410/21/205405b2dzgtxt2stq27d7.jpg);min-width:1000px">
<header class="header"></header>
<div id="grid">
<div class="view">
<div class="view-back">
<span style="font:32px 'Microsoft YaHei';position:absolute;right:20px;text-shadow: 2px 2px .3em rgba(255, 255, 255, .6);color:#FFF">HIT FM</span>
<span style="font:18px 'Microsoft YaHei';position:absolute;right:5px;top:50px;text-shadow: 1px 1px .3em rgba(0, 0, 0, .8);">NEVER <br/>STOP THE BEAT!</span>
</div>
<img src="data/attachment/album/201410/21/205406wfuvvuowv1yhdvdv.jpg" />
</div>
<script type="text/javascript">
//jquery插件代码
$.fn.hoverfold = function( args ) {
this.each( function() {
$( this ).children( '.view' ).each( function() {
var $item = $( this ),
img = $item.children( 'img' ).attr( 'src' ),
struct = '<div class="slice s1">';
struct +='<div class="slice s2">';
struct +='<div class="slice s3">';
struct +='<div class="slice s4">';
struct +='<div class="slice s5">';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
struct +='</div>';
var $struct = $( struct );
$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) );
});
});
};
//调用插件
$( '#grid' ).hoverfold();
</script>
</div>
</body>
</html>

复制代码

via:http://www.w3cfuns.com/blog-5452961-5401334.html

natalie86

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
利用css3做出立体折叠效果

原理介绍：这种折叠效果是小编我在一个英文网站上学的，这个英文网站上的很多特效都很不错，推荐给你们进去看看，这个网站叫codrops接下来正式简单介绍一下原理。折叠效果利用了css3里面的perspective 属性，这是一个3D画图里面的东西——透视；透视我就不具体介绍了，推荐一篇专门讲解perspective属性的文章——http://www.zhangxinxu.com/wordpr
复制链接

扫一扫