所以我想制作一个用鼠标移动的背景。背景需要比屏幕大15%左右才能使效果更好。我没有使用tilable图像。
我尝试使用background-size:115%
,但问题是图片是水平的,如果浏览器尺寸不够宽,我们可以看到图片的边缘。
使用background-size:cover
不起作用,因为我无法设置动画,因为没有外部图像。
使用width:115%; height:115%
的图片会使图片不成比例。
我在某处读过使用绝对位置和动画顶部和左边的div,它与背景上的背景相差115%会对性能造成影响,因为体尺会重新计算每一帧?
答案 0 :(得分:1)
一个可能性是只使用Z中的变换,以及一些观点。
然后在鼠标移动时使用pespective origin
var mouseMove = function(e) {
var elem = document.getElementById('container');
elem.style.perspectiveOrigin = e.pageX +'px ' + e.pageY + 'px';
}
window.onload = function() {
this.addEventListener('mousemove', mouseMove);
}

body, html {
height: 100%;
margin: 0px;
}
#container {
width: 100%;
height: 100%;
position: relative;
perspective: 400px;
}
.inner {
width: 100%;
height: 100%;
position: absolute;
background-image: url(https://static.pexels.com/photos/51021/pexels-photo-51021.jpeg);
background-size: cover;
transform: translateZ(100px);
}

<div id="container">
<div class="inner">
</div>
</div>
&#13;