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

Question

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

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

DEMO

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

现在我想将 CSS 中的 content:url 属性添加到 ':hover' 部分，这样当图像翻转时 source 图像应该改变。但是，如果我尝试这样做，它不起作用并且动画也会失败。

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

Not working Demo

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);
}

Demo

Source

替代过渡方法

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

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");
}

Demo