html - 动态更改图像的内容/src

Question

我正在尝试仅使用 HTML 和 CSS/CSS3 创建一个简单的动画。

现在我正在读一点 CSS3 转换。我能够创建这个演示

演示

现在这只是一个简单的悬停动画，它将图像旋转 180 度并持续 2 秒。

现在我正在尝试将content:urlCSS 中的属性添加到':hover'部件中，以便在图像翻转时图像的源应该改变。但是，如果我尝试这个它不起作用，动画也会失败。

这可以仅使用 CSS 和 HTML 来完成，还是我必须使用 javascript/jQuery。

不工作演示

CSS

img{
width:200px;
height:300px;
}
img:hover
{
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);    
content:url("http://tinyurl.com/n6qyafn");
transition-duration: 3s;
-webkit-transition-duration: 3s;
}

Answer 1

您可以使用 2 个 div 来实现这一点，一个背面和一个正面并在旋转时交换它们：

HTML

<div class="hover panel">
    <div class="front"></div>
    <div class="back"></div>
</div>

CSS

.panel {
    width: 186px;
    height: 271px;
    margin: 20px;
    position: relative;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}
.panel .front, 
.panel .back {
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.panel .front {
    z-index: 900;
    background: url("http://tinyurl.com/n5d9bet");
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}
.panel:hover .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}
.panel .back {
    z-index: 800;
    background: url("http://tinyurl.com/n6qyafn");
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}
.panel:hover .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}

演示

来源

替代过渡方法

一种更简单的方法是在将背景图像转换到旋转转换之间的中间时使用延迟。

HTML

<div id="card"></div>

CSS

#card {
    background: url("http://tinyurl.com/n5d9bet");
    width: 186px;
    height: 271px;
    transition: all 1s linear, background-image 0ms 500ms linear;
}
#card:hover {
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    background: url("http://tinyurl.com/n6qyafn");
}

演示