Card Expt

by Kirubel Girma

HTML

<div class="card cardID_animback" id="cardID">
<video class="vidSec_crd" id="ids" nocontrols onClick="reply_click(this.id)">
    <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4"/>
</video>

<div class="playIcn"></div>
</div>

CSS

body {
  font-family: arial;
  position: absolute;
  height: 100%;
  width: 100%;
}
.vidSec_crd {position: absolute; width: 100%; height: 100%;}
.card {
  overflow: hidden;

  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;


  background-size: cover;
  border-radius: 1em;
  height: 21em;
  width: 14em;
  background-color: black;

  box-shadow: 0em 0em 1em #00000066;
}

.card:pseudo-class{
  height: 1em;
  width: 1em;
  position: absolute;
  margin: 0 auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  background-color: red;
}

.cardID_animback {
  -webkit-transition: .05s;
  -moz-transition: .05s;
  -ms-transition: .05s;
  -o-transition: .05s;
  transition: .05s ease-in;
  transform: perspective(400px) rotate3d("0,0,0,10deg");
}

.playIcn {
  height: 3em;
  width: 3em;
  background: cornflowerblue;
  position: absolute;
  box-shadow: 1em 1em 1em black;
  border-radius: 50%;
  bottom: 1em;
  right: 1em;
}

JavaScript

document.getElementById('cardID').addEventListener('mousemove', msmove);
document.getElementById('cardID').addEventListener('click', playcard);
var playing = false

function playcard(){
  var video = document.getElementById('ids');
  video.play();
  if (playing==false){playing=true; video.play();}else{video.pause(); playing=false;}
}


document.getElementById('cardID').addEventListener('mouseleave', e => {
  var xf = 'transform:perspective(400px) rotate3D(' + 0 + "," + 0 + "," + "0" + "," + '10deg);'
  document.getElementById("cardID").setAttribute('style', xf);
});

function gettingmouselocation(element) {
  var rect = element.target.getBoundingClientRect();
  var x = element.clientX - rect.left;
  var y = element.clientY - rect.top;
  return {
    x,
    y
  }
}

function msmove(element) {

  var position = gettingmouselocation(element);
  //new_value = ( ( old_value - old_min ) / (old_max - old_min) ) * (new_max - new_min) + new_min
  var nvalue_y = ((position.y - 10) / (315 - 10)) * (0.01 + 0.01) - 0.01;
  var nvalue_x = ((position.x - 220) / (10 - 220)) * (0.01 + 0.01) - 0.01;

  //transform: perspective(400px) rotate3d(-0.1, 0.1, 0, 10deg);
  var xf = 'transform:perspective(400px) rotate3D(' + nvalue_y + "," + nvalue_x + "," + "0" + "," + '10deg);'
  document.getElementById("cardID").setAttribute('style', xf);

  //alert(xf);
  
  
  document.getElementById("cardID").setAttribute('style', xf)
}

function animate_back() {
  document.getElementById('cardID').addClass('cardID_animback');
  alert('Mouse Left!');
}