/* 2dtransform.css */

#butterfly2,
#flower,
#skateboard{
    transition: transform 0.5s;
}

img{
    width: 350px;
    height: 300px;
}

#butterfly2:hover {
    transform: rotate(45deg);
}

#flower:hover {
    transform: scale(2);
}

.move-right {
    transform: translateX(900px)
}

/* solution */
article{
    position: relative;
}

article section {
    position: absolute;
    width: 500px;
    left: -500px;
    padding: 0 1em 0.5em 0.5em;
    top: 2.44em;
    background-color: rgba(16,16,16,0.95);
    transition: transform 0.5s;
}

article section nav{
    width: 110%;
    text-align: right;
    background-color: rgba(16,16,16,0.95);
    padding: 0.5em;
}

.visible{
    transform: translateX(500px);
}