首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网页图片实现层次+旋转的3D展示效果

请点击输入图片描述

今天在学习vue的时候发了一个简单的banner效果图:如下(来源)

感觉挺有意思,于是就给它实现一波。(html和css是扒的)

实现原理就是两张图片在3d中显示前后位置,通过透视图perspective属性实现(透视图和我们的眼睛看到的是一样的,越远的物体看上去越小。还有种正交视图,不会根据距离收缩。)

代码如下:

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

.banner {

-webkit-perspective: 3000px;

perspective: 3000px;

position: relative;

z-index: 19

}

.bg {

position: relative;

width: 1220px;

height: 500px;

margin: 20px auto;

background: url(banner-3d-item.png) 50% no-repeat;

background-size: 100% 100%;

border-radius: 10px;

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

transform-style: preserve-3d;

-webkit-transform-origin: 50% 50%;

-webkit-transform: rotateY(0deg) rotateX(0deg);

}

.img {

display: block;

position: absolute;

width: 100%;

height: 100%;

bottom: 5px;

left: 0;

background: url("banner-3d.png") center no-repeat;

background-size: 95% 100%;

}

.text {

position: absolute;

top: 20%;

right: 10%;

font-size: 30px;

color: #fff;

text-align: right;

font-weight: lighter;

}

.copyright {

position: absolute;

bottom: 10%;

right: 10%;

font-size: 10px;

color: #fff;

text-align: right;

font-weight: lighter;

}

.a {

-webkit-transform: translateZ(40px);

}

.b {

-webkit-transform: translateZ(20px);

}

.c {

-webkit-transform: translateZ(0px);

}

以傲慢与偏执

回敬傲慢与偏见

code by qingjin.me | picture from t.tt

var bindEvent = function(dom, eventName, listener){

if(dom.attachEvent) {

dom.attachEvent('on'+eventName, listener);

} else {

dom.addEventListener(eventName, listener);

}

}

var bg = document.getElementById('bg');

bindEvent(bg, 'mousemove', function(e){

let x = e.offsetX - (bg.offsetWidth / 2)

let y = bg.offsetHeight / 2 - e.offsetY

bg.style['-webkit-transform'] = `rotateY($deg) rotateX($deg)`

bg.style.transform = `rotateY($deg) rotateX($deg)`

})

bindEvent(bg, 'mouseout', function(e){

bg.style['-webkit-transform'] = `rotateY(0deg) rotateX(0deg)`

bg.style.transform = `rotateY(0deg) rotateX(0deg)`

})

扒好后发现动画很卡,一开始我还以为是demo的服务器比较差带不动动画,可在本地运行也贼卡。

于是去找原因:最终发现问题出在

transition: all .3s

这个css属性。

transition是过渡属性,这句话的含义是所有的变换(位子,宽高,透明度,旋转等等)在0.3秒内过渡完成。

可是我们js实现的时候是实时根据鼠标位置修改rotate的角度的,而且鼠标移动触发的频率贼高。每次都使用0.3秒过渡,就导致每次动画过渡还没执行结束又开始新的动画。所以导致卡顿。

解决方法就是把它改成0秒或直接删除这个属性就OK了

小技巧:添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);,这两个属性都会开启GPU硬件加速模式。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180415A1BD3700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券