Html 悬停时图像翻转只是反射图像,而不是实际翻转
该网站是3peak.us,我目前正在尝试在页面上均匀显示3个图像翻转div。我也希望它能做出响应 我试着把它们都放在一个100%宽度的分区中,然后每个分区都做30%,但似乎不起作用。当我将它们设为30%时,它们变成了实际图像div的30%,而不是整个页面 这是div的css编码Html 悬停时图像翻转只是反射图像,而不是实际翻转,html,css,image,hover,flip,Html,Css,Image,Hover,Flip,该网站是3peak.us,我目前正在尝试在页面上均匀显示3个图像翻转div。我也希望它能做出响应 我试着把它们都放在一个100%宽度的分区中,然后每个分区都做30%,但似乎不起作用。当我将它们设为30%时,它们变成了实际图像div的30%,而不是整个页面 这是div的css编码 .threeflips { width: 100%; } .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-
.threeflips {
width: 100%;
}
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
width: 30%;
float: left;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 400px;
height: 400px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}
.bflip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
float: left;
width: 30%;
}
.bflip-container:hover .bflipper,
.bflip-container.hover .bflipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.bflip-container, .bfront, .bback {
width: 400px;
height: 400px;
}
.bflipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.bfront, .bback {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.bfront {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/2front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.bback {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/2back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}
.cflip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
width: 30%;
float: left;
}
.cflip-container:hover .cflipper,
.cflip-container.hover .cflipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.cflip-container, .cfront, .cback {
width: 400px;
height: 400px;
}
.cflipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.cfront, .cback {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.cfront {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/3front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}
.cback {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/3back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}
这是html
<div class="threeflips">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
<div class="bflip-container" ontouchstart="this.classList.toggle('hover');">
<div class="bflipper">
<div class="bfront">
</div>
<div class="bback">
</div>
</div>
</div>
<div class="cflip-container" ontouchstart="this.classList.toggle('hover');">
<div class="cflipper">
<div class="cfront">
</div>
<div class="cback">
</div>
</div>
</div>
一旦我改变。翻转容器,。正面。背面,加上30%,所有的东西都消失了。因此,我让它们显示的唯一方法是设置px宽度,但它们不再响应。为什么要将.front、.back更改为30%?正面和背面都应为100%宽度,仅.flip容器应为30%或33.33%,具体取决于您的设计
.flip-container {
width: 33.33%;
height: 400px;
}
.front, .back {
width: 100%;
height: 400px;}
因此,将.flip容器样式从.front和.back样式中分离出来,您的代码已经按照您的摘要进行了编辑,可以在上找到,这对我很有用。不过我还有一个问题。。。。有没有一种方法可以使高度也能响应?