<div id="container">
<div id="inner">
<div class="demo-img">
<div class="demo-overlay">
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 612 612" xml:space="preserve">
<path d="M535.5,0h-153v76.5h114.75c21.133,0,38.25,17.136,38.25,38.25V229.5H612v-153C612,34.253,577.747,0,535.5,0z M0,76.5v153
h76.5V114.75c0-21.133,17.117-38.25,38.25-38.25H229.5V0h-153C34.253,0,0,34.253,0,76.5z M76.5,497.25V382.5H0v153
C0,577.747,34.253,612,76.5,612h153v-76.5H114.75C93.617,535.5,76.5,518.383,76.5,497.25z M535.5,497.25
c0,21.133-17.117,38.25-38.25,38.25H382.5V612h153c42.247,0,76.5-34.253,76.5-76.5v-153h-76.5V497.25z"/>
</svg>
</div>
</div>
</div>
</div
:root {
--mouseX: 0deg;
--mouseY: 0deg;
}
body {
width: 100%;
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(223, 223, 223);
}
#container {
perspective: 30px;
perspective-origin: center;
}
#inner {
transform: rotateX(calc(var(--mouseY)))
rotateY(calc(var(--mouseX)));
transition-origin: center;
transition: transform 0.5s;
box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.2);
}
/*============================================================
* EXTRAS
*============================================================*/
.demo-img {
/* Photo by David Marcu on Unsplash */
border: solid white 15px;
background-image: url("https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1953&q=80");
background-size: cover;
background-repeat: no-repeat;
}
#container:hover .demo-overlay {
opacity: 1;
}
#container:hover {
cursor: pointer;
}
.demo-overlay {
width: 25em;
padding: 10em 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.4s;
}
.demo-overlay svg {
display: block;
margin: 0 auto;
fill: white;
}
(function(){
var container = document.getElementById('container'),
inner = document.getElementById('inner');
var counter = 0;
var refreshRate = 10;
var isTimeToUpdate = function() {
return counter++ % refreshRate === 0;
};
var updateTransformStyle = function (xPos, yPos) {
var wh = window.innerHeight / 2,
ww = window.innerWidth / 2;
inner.style.setProperty('--mouseX', (xPos - ww) / 300 + 'deg');
inner.style.setProperty('--mouseY', (yPos - wh) / 300 + 'deg');
}
var onMouseEnterHandler = function(event) {
updateTransformStyle(event.clientX,event.clientY);
};
var onMouseMoveHandler = function (event) {
if (isTimeToUpdate()) {
updateTransformStyle(event.clientX,event.clientY);
}
}
var onMouseLeaveHandler = function() {
inner.style = "";
};
var onTouchMoveHander = function (event) {
event.preventDefault();
var touch = event.targetTouches[0];
if (touch) {
updateTransformStyle(touch.pageX, touch.pageY);
}
}
container.onmousemove = onMouseMoveHandler;
container.ontouchmove = onTouchMoveHander;
container.onmouseleave = onMouseLeaveHandler;
})()
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.