css - 如何在使用 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/