使用CSS时如何平滑地翻转图像？

Question

我正在尝试使用CSS3动画将图像悬停在其上。但问题是轮换并不顺畅，而且其中存在许多错误。请帮我解决这个问题。

这是我的CSS代码

.rotate
        {
            transition:transform 0.7s;
            transition-timing-function : ease-in-out;
        }
       .rotate:hover
       {
           opacity :100%;
           transform:rotateY(180deg);
       }
       .back
       {
           visibility : hidden;
           text-align : center;
           position:absolute;
           top:0;
           bottom:0;
           left:0;
           right:0;
           opacity:0;
           transform:rotateY(180deg);
           background-color: lightgray;
           border-color:white;
           padding-top:40px;
       }
       .rotate:hover .back
       {
           visibility:visible;
           opacity:0.7;
       }

Answer 1

您必须使用<figure>和<figcaption>元素...

实施例： https://jsfiddle.net/e3xfj5ng/