我發現了這個很酷的 3d 傾斜懸停影像效果，歸功于這個 codepen： https ://codepen.io/technokami/pen/abojmZa
我發現的唯一問題是，當你開始將滑鼠懸停在它上面時，影片就會開始，但是一旦你將滑鼠移開，它就會立即重置到它的起點。這可能是一個小細節，但如果影片能夠順利恢復，那就更好了。
（例如： http: //jsfiddle.net/Ugc5g/892/不一樣，但描述了我的意思，用反向影片，我想用第一個3d懸停影片實作類似的反向影片codepen，縮放并旋轉回原點位置，而不僅僅是跳回）
/* Add listener for mouseout event, remove the rotation
TODO: add reverse animation scale and rotate back to original smoothly
*/
el.addEventListener('mouseout', function() {
el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'
})
我試圖修復它，但找不到合適的解決方案，希望這里的 css 影片大師可以幫助我。
uj5u.com熱心網友回復：
像這樣或通過轉到360旋轉回來？這個是通過延遲來平滑它。
/* Store the element in el */
let el = document.getElementById('tilt')
/* Get the height and width of the element */
const height = el.clientHeight
const width = el.clientWidth
/*
* Add a listener for mousemove event
* Which will trigger function 'handleMove'
* On mousemove
*/
el.addEventListener('mousemove', handleMove)
/* Define function a */
function handleMove(e) {
/*
* Get position of mouse cursor
* With respect to the element
* On mouseover
*/
/* Store the x position */
const xVal = e.layerX
/* Store the y position */
const yVal = e.layerY
/*
* Calculate rotation valuee along the Y-axis
* Here the multiplier 20 is to
* Control the rotation
* You can change the value and see the results
*/
const yRotation = 20 * ((xVal - width / 2) / width)
/* Calculate the rotation along the X-axis */
const xRotation = -20 * ((yVal - height / 2) / height)
/* Generate string for CSS transform property */
const string = 'perspective(500px) scale(1.1) rotateX(' xRotation 'deg) rotateY(' yRotation 'deg)'
/* Apply the calculated transformation */
el.style.transform = string
}
/* Add listener for mouseout event, remove the rotation */
el.addEventListener('mouseout', function() {
el.style.transform = ' perspective(500px) scale(1) rotateX(0) rotateY(0) ';
el.style.transition = 'all 3s ease-out';
})
/* Add listener for mouseover event, to simulate click */
el.addEventListener('mouseover', function() {
el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)';
el.style.transition = 'all 0s ease-out'
})
/* Add listener for hover, simulate release of mouse click */
el.addEventListener('hover', function() {
el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)';
el.style.transition = 'all 0s ease-out';
});html {
display: flex;
justify-content: center;
align-items: center;
align-contents: center;
height: 100%;
}
/* Styles for the tilt block */
#tilt {
display: block;
height: 200px;
width: 300px;
background-color: grey;
margin: 0 auto;
transition: box-shadow 0.1s, transform 0.1s;
/*
* Adding image to the background
* No relation to the hover effect.
*/
background-image: url(http://unsplash.it/300/200);
background-size: 100%;
background-repeat: no-repeat;
}
#tilt:hover {
box-shadow: 0px 0px 30px rgba(0,0,0, 0.6);
cursor: pointer;
}<div id="tilt">
<!-- Container for our block -->
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/459083.html
標籤：javascript html css 动画片 徘徊
上一篇：GLTF影片在三個js中不起作用