Rotating Image

Rotating image similar to seen at Smashing Magazine site, implemented differently to (in my opinion) improve the shadow

by webdevem

HTML

<p>
  Rotating image similar to seen at Smashing Magazine site, implemented differently to (in my opinion) improve the shadow
</p>
<div class="headsshotOuter movePicture">
  <div class="headshotWrapper rotate">
    <img src="https://thispersondoesnotexist.com/image" alt="WebDev EM">
  </div>
</div>

CSS

.movePicture {
  margin-top: 100px;
  margin-left: 100px;
}
.headshotWrapper {
    float: left;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .8);
    border: 2px inset #000;
    transform-origin: bottom left;
    overflow: hidden;
}

.headsshotOuter:after {
        content: "XXXXXXXXXXXX";
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
        position: relative;
        left: -130px;
        top: 100px;
        color: transparent;
        font-size: 0.9em;
        transition: all .3s ease-in-out;
}
.headsshotOuter:hover:after {
    left: -110px;
    font-size: 0.75em;
}
.headshotWrapper img {
    width: 100%;
    transform: rotateZ(15deg) scaleY(1.3) scaleX(1.3);
    transition: all .3s ease-in-out;
}
.headsshotOuter:hover .headshotWrapper img {
    transform: rotateZ(0deg) scaleY(2.3) scaleX(2.3);
}
.rotate {
    -webkit-transform: rotateZ(-15deg);
    -ms-transform: rotateZ(-15deg);
    transform: rotateZ(-15deg);
    transition: all .3s ease-in-out;
}
.headsshotOuter:hover .headshotWrapper,
.rotate:hover {
    -webkit-transform: rotateZ(0);
    -ms-transform: rotateZ(0);
    transform: rotateZ(0);
}