CSS and HTML to animate a HTML div element with a shifting effect using event listeners, mousemove and mouseout.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="container">
<div class="shifting-card">
<div class="content">
<h3>Card</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?</p>
</div>
</div>
</div>
<div class="container"> <div class="shifting-card"> <div class="content"> <h3>Card</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?</p> </div> </div> </div>
<div class="container">
  <div class="shifting-card">
    <div class="content">
      <h3>Card</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?</p>
    </div>
  </div>
</div>
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.container {
display: flex;
padding: 24px;
justify-content: center;
align-items: center;
background: #f3f1fe;
}
.shifting-card {
width: 350px;
display: flex;
flex-direction: column;
align-items: center;
background: #fff;
border-radius: 10px;
margin: 0.5rem;
transition: transform 0.2s ease-out;
box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}
.shifting-card .content {
text-align: center;
margin: 2rem;
line-height: 1.5;
color: #101010;
}<div class="code-highlight relative mt-4" data-language="js"><pre class="language-js notranslate m-0" data-code-language="JavaScript" translate="no">const card = document.querySelector('.shifting-card');
const { x, y, width, height } = card.getBoundingClientRect();
const cx = x + width / 2;
const cy = y + height / 2;
const handleMove = e => {
const { pageX, pageY } = e;
const dx = (cx - pageX) / (width / 2);
const dy = (cy - pageY) / (height / 2);
e.target.style.transform =
`rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`;
};
const handleOut = e => {
e.target.style.transform = 'initial';
};
card.addEventListener('mousemove', handleMove);
card.addEventListener('mouseout', handleOut);
.container { display: flex; padding: 24px; justify-content: center; align-items: center; background: #f3f1fe; } .shifting-card { width: 350px; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 10px; margin: 0.5rem; transition: transform 0.2s ease-out; box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1); } .shifting-card .content { text-align: center; margin: 2rem; line-height: 1.5; color: #101010; }<div class="code-highlight relative mt-4" data-language="js"><pre class="language-js notranslate m-0" data-code-language="JavaScript" translate="no">const card = document.querySelector('.shifting-card'); const { x, y, width, height } = card.getBoundingClientRect(); const cx = x + width / 2; const cy = y + height / 2; const handleMove = e => { const { pageX, pageY } = e; const dx = (cx - pageX) / (width / 2); const dy = (cy - pageY) / (height / 2); e.target.style.transform = `rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`; }; const handleOut = e => { e.target.style.transform = 'initial'; }; card.addEventListener('mousemove', handleMove); card.addEventListener('mouseout', handleOut);
.container {
  display: flex;
  padding: 24px;
  justify-content: center;
  align-items: center;
  background: #f3f1fe;
}

.shifting-card {
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  margin: 0.5rem;
  transition: transform 0.2s ease-out;
  box-shadow: 0 0 5px -2px rgba(0, 0, 0, 0.1);
}

.shifting-card .content {
  text-align: center;
  margin: 2rem;
  line-height: 1.5;
  color: #101010;
}<div class="code-highlight relative mt-4" data-language="js"><pre class="language-js notranslate m-0" data-code-language="JavaScript" translate="no">const card = document.querySelector('.shifting-card');
const { x, y, width, height } = card.getBoundingClientRect();
const cx = x + width / 2;
const cy = y + height / 2;

const handleMove = e => {
  const { pageX, pageY } = e;
  const dx = (cx - pageX) / (width / 2);
  const dy = (cy - pageY) / (height / 2);
  e.target.style.transform =
    `rotateX(${10 * dy * -1}deg) rotateY(${10 * dx}deg)`;
};

const handleOut = e => {
  e.target.style.transform = 'initial';
};

card.addEventListener('mousemove', handleMove);
card.addEventListener('mouseout', handleOut);

CC BY 4.0 added intro and tags – 30 Seconds of Code

Tags: CSS,HTML, CSS animation, animate,div, div element, shifting effect, event listeners, mousemove and mouseout