javascript - 更改 CSS 过渡开始和结束位置

Question

var ImageTrigger = false;

$(document).on('click', 'body img', function() {
  if (!ImageTrigger) {
    $(this).addClass("imgclick");
    ImageTrigger = true;
    return false;
  }
});
$(document).on('click', 'body', function() {
  if (ImageTrigger) {
    $("img").removeClass("imgclick");
    ImageTrigger = false;
  }
});

img {
  transition: 0.3s ease-in-out;
  max-width: 90%;
}
.imgclick {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* transform-origin: 0px center 0px; */
  box-shadow: rgba(0, 0, 0, 1) 15px 15px 50px;
  z-index: 100001;
  padding: 10px;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="imgclick" style="max-height: 400px;max-width:50%;margin: 0 auto;display: table;" src="http://www.biologicaldiversity.org/assets/img/species/mammals/GrayWolf_USFWS_FPWC_2_HIGHRES-scr.jpg" alt="image alt" title="Cool">

我试图让入口看起来像从原始位置缩小并进入中心的同一图像，在退出时它又回到原来的位置。我尝试使用 transform-origin 但没有成功。

还有什么干净的方法可以让图像占据 90% 的屏幕而不扭曲纵横比？

编辑:

点击图片时，图片从右下角进入，返回时从左上角进入。我试图让它看起来像是来自原始图像并返回到原始图像，而不是左上角和右下角。

我使用的初始代码

.imgclick{
    max-height: 400px; 
    max-width: 95%; 
    margin: 0px auto; 
    display: table; 
    transform: scale(1.44); 
    transform-origin: left center 0px; 
    box-shadow: rgba(0, 0, 0, 0.611765) 0px 0px 13px; 
    z-index: 100001; 
    padding: 10px; 
    background: white; 
    position: relative;
}

Answer 1

.img{
    transition: 0.3s ease-in-out;
    max-width:90%;
    transform: scale(1);
}


.imgclick{
            transform: scale(1.2);
            box-shadow: rgba(0, 0, 0, 1) 15px 15px 50px;
            z-index: 100001;
            padding: 10px;
            background: white;
}

我不太清楚您到底在尝试什么。但是上面的代码确实放大和缩小了。您可以根据需要进行修改。 :)