css图形动画,CSS3动画(1):transform实现cube动画

除了可以利用焦点图来展示图片,我们还可以运用CSS3动画来展示图片。今天就给大家带来cube动画。

效果:

dd1be967aeab

cube.gif

(是不是很好玩呢?o(▽)o)

制作思路:制作两个面,分别位于正前面(面1)和上面(面2),过一定时间后面1沿X轴转动90度,翻转至下面,面2翻转至正前面,面1背景替换成面2的背景,并移除翻转动画的div(面2),使面1、2 恢复最初的状态(面1在正前面,面2在上面),面2替换成第3张图片,此过程循环进行。

具体实现:

html部分:

关键的css部分:

起初让面1在正前方,背景为图片1,面2为上方,背景为图片2,形成一个简单的立体形状.

面1、2:

.face:nth-child(1){/*面1*/

background: url(../img/sample1.jpg) no-repeat center;

}

.face:nth-child(2){/*面2*/

transform-origin: left bottom; /*center bottom也可以*/

-webkit-transform: translateY(-100%) rotateX(90deg); /*第二面原本与第一个面平行,先让其上移100%,然后往后转90度*/

background: url(../img/sample2.jpg) no-repeat center;

}

效果是这样的

dd1be967aeab

PJPF%XL7ZGO6VN44_PA%L$J.png

box:

.box{

-webkit-transform-style: preserve-3d;

-webkit-transform-origin:center center -200px;/*box的中心由原本的正前面的中点位置移至box的中心位置*/

-webkit-transform: rotateX(0deg);

-webkit-transition: none;

}

.box.show{/*实现box旋转,box添加此class,实现面1面2转换,移除则变回初始状态。*/

-webkit-transform:rotateX(-90deg);/*以box的中心为原点沿X轴转动90度*/

-webkit-transition: -webkit-transform 0.5s cubic-bezier(.17,.67,.68,1.43) 1s;

}

outer_box:

.outer_box{

-webkit-perspective: 1000;

}

这部分很重要,如果没有设置perspective,翻转图片会是片状的感觉。效果会是这样的。

dd1be967aeab

cube2.gif

(一片一片的感觉,很奇怪有木有(ˉ▽ˉ;)...)

js:实现自动播放和切换图片

window.onload = function () {

var index = 2 , nextIndex = index+1;

setInterval(function(){

box.classList.add('show'); //自动循环播放动画

},200);

var box = document.querySelector('.box');

var face = document.getElementsByClassName('face');

box.addEventListener("webkitTransitionEnd", function () {

if(index >= 4)

nextIndex = 1; //当face[0]为第4张图片(最后一张),face[1]为第1张图片

else

nextIndex = index + 1;

face[0].style.backgroundImage = 'url(img/sample'+index+'.jpg)';

face[1].style.backgroundImage = 'url(img/sample'+nextIndex+'.jpg)'

box.classList.remove('show');

index = nextIndex;

})

}

总结:

1、在祖父div设置-webkit-perspective: 1000;可增强3D效果。也可以改变perspective-origin哦(默认是50% 50%)。

2、在父元素设置-webkit-transform-style: preserve-3d;使用3D效果实现变换。同样可以改变-webkit-transform-origin。

3、效果中旋转至正前面顿一下的效果是利用bezier曲线实现的。只要把transition中的速度曲线替换成下面网址的值就可以了。

bezier的网址:http://cubic-bezier.com/#.17,.67,.83,.67(十分有用!好好收藏哦...)

4、我只兼容chrome,若兼容其他的浏览器请加前缀哦。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值