Question

我的问题涉及以下小提琴：JSFiddle

<body>
    <div class="transform">Content</div>
</body>

body {
background-color: rgb(255, 255, 255);
background-image: url("http://i.imgur.com/aQLvU9B.png");
}

如果将鼠标悬停在内容div上，则会激活矩阵变换。我想要这个变换后的div白色背后的背景，而不是显示身体背景。

任何想法如何在不将变换后的div嵌入另一个div的情况下如何做到这一点？我试着玩：之前和之后但没有找到可行的解决方案:(

谢谢和问候，亨德里克

Answer 1

在变换之前放置另一个div，称之为transform-bg并给出一个白色背景的相对位置（给它相同的变换div的高度和宽度。

Answer 2

正如Donte Trumble所说，我不认为如果不增加另一个div就可以做到......除非你作弊一点。

这是我的解决方案

updated fiddle

和CSS

.transform{
    width: 200px; height: 200px;  
    position: relative;
    border: 1px solid white;
    background-color: #DDD;
    vertical-align: bottom; 
    -o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition:.5s;
}

.transform:hover {
    background-color: #CACACA;  
    -moz-transform: matrix(1, 0.05, 0.01, 1, 0, 0) scale(0.95,0.95);
    -webkit-transform: matrix(1, 0.05, 0.01, 1, 0, 0) scale(0.95,0.95);
    transform: matrix(1, 0.05, 0.01, 1, 0, 0) scale(0.95,0.95);
}

.transform:before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: white;
    z-index: -1;
    -o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition:.5s;
}
.transform:hover:before {
    -moz-transform: matrix(1.0005, -0.05, -0.01, 1.0005, 0, 0) scale(1.05,1.05);
    -webkit-transform: matrix(1.0005, -0.05, -0.01, 1.0005, 0, 0) scale(1.05,1.05);
    transform: matrix(1.0005, -0.05, -0.01, 1.0005, 0, 0) scale(1.05,1.05);
}
.transform:after {
    content: "Content";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #DDD;
    z-index: 1;
    -o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition:.5s;
}
.transform:hover:after {
    background-color: #cacaca;
}

我不会解释你是不是我被骗了......我留给你发现..

CSS3转换 - 转换div下的中性背景

2 个答案: