Question

<强烈>目标
- 悬停时垂直翻转手风琴标题div - 正面和背面具有完全相同的文本和color:，但不同的background-color:。

问题
- 我正在使用水平翻转的这个版本，它可以工作，但它有不同的结构代码。它不在ul中。它是直接的HTML div。将此应用于ul让我感到困惑 - 垂直翻转正常，但它正面显示正面文字。

FIDDLE
http://jsfiddle.net/zuhloobie/21b2r35n/

HYPOTHESIS
- 上面的小提琴在以下之前（1）我需要在<div class="vFront">text</div>内放置一个<div class="vBack">text</div>和<li>以显示/隐藏前面背面，但我没有正确地执行此操作。当我实现它时，它会破坏动画和设计（2）我尝试在上面尝试（1）之后调整jquery代码，所以它会正确地找到<a>以便正确地设置动画（扩展/收缩），但我无法将其设置为工作要么。我认为这段代码可能是罪魁祸首。

所以我被困：/思考？

Answer 1

您可以将li垂直翻转180°，而不会通过将scaleY(-1)添加到变换来翻转文字：

.vertical.vFlipContainer:hover .vFlipper {
  transform:rotateX(-180deg) scaleY(-1);
}

a的背景并没有立即改变，可能是因为有几个因素：其父li的固有填充，动画时机可能会干扰其悬停风格。< / p>

要解决此问题，请让li处理背景样式更改。从background-color删除#drawer.courseDrawer > ul > li > a，并使用以下样式：

.vertical.vFlipContainer .vFlipper {
  transform-origin:100% 50%;
  background-color:#FF8000;
}

.vertical.vFlipContainer:hover .vFlipper {
  transform:rotateX(-180deg) scaleY(-1);
  background-color: #999999;
}

Working Fiddle

Answer 2

将悬停效果更改为-360

.vertical.vFlipContainer:hover .vFlipper {transform:rotateX(-360deg);}

http://jsfiddle.net/21b2r35n/1/

Answer 3

这可能不是最小的＆＃34;解决方案，但我认为它会完全按照您的意愿行事。原始栏的标题栏只有灰色标题栏，但当你在展开的内容上悬停时，它仍然会翻转栏。我的变体的一部分是，它会在翻转栏时改变标题栏的颜色，而不仅仅是当你在栏上盘旋时。

修改后的CSS：

/* MISC ---- */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
body {font-family: 'Open Sans', sans-serif; font-weight:300; letter-spacing:1px; color:#4D4D4D; padding-top:0px; }
.blackColor {color:#000000 !important;}
.grayColor {color:#999999 !important;}

/* ACCORDION GENERIC ---- */
#drawer {width:100%; text-align:left; margin-top:20px;}
#drawer ul { list-style:none; padding:0;}
/*hands*/
#drawer > ul > li.has-sub > a:before {font-family:FontAwesome; content:'\f0a7 \00a0';}
#drawer > ul > li.has-sub.active > a:before {font-family:FontAwesome; content:'\f0a6 \00a0';}
/*text*/
#drawer ul ul li:nth-child(even) {padding-left:60px; font-size:14px; color:#999999; line-height:24px;}

/* ACCORDION SPECIFIC ---- */
/*title*/
#drawer.courseDrawer > ul > li > a {font-size:16px; display:block; color:#FFF; margin-top:20px; padding:10px; text-decoration:none; line-height:20px;}
#drawer.courseDrawer > ul > li > a:hover {text-decoration:none; color:#FFF;}
/*heading*/
#drawer.courseDrawer ul ul li:nth-child(odd) {padding-left:30px; font-size:14px; color:#000000; line-height:18px;}
/*dropdown*/
#drawer.courseDrawer ul ul {display:none; list-style:none; padding:10px 0 20px 0; margin:0 0 20px 0; border-left:1px solid #FF8000; border-right:1px solid #FF8000; border-bottom:1px solid #FF8000;}

/* VERTICAL FLIP ---- */
.vFlipContainer {perspective:1000px;}
.vFlipContainer, .vFront, .vBack {width:100%; height:auto;}
/* flip speed */
.vFlipper {transition:0.3s; transform-style:preserve-3d; position:relative;}
/* hide back */
.vFront, .vBack {backface-visibility:hidden; -webkit-backface-visibility:hidden;}
/* front */
.vFront {z-index:1; background-color:#FF8000; color:#FFF;}
/* back */
.vBack {transform:rotateX(-180deg); background-color:#4FAEDD; color:#FFF; animation:vtoFront 0.3s linear normal forwards;}
.vertical.vFlipContainer {position:relative;}
.vertical.vFlipContainer:hover .vBack {animation-delay:0.3s; animation:vtoBack 0.3s linear normal  forwards;}
@keyframes vtoBack {  
  0% {z-index:0;}
  100% {z-index:1;}
}
@keyframes vtoFront {
  0% {z-index:1;}
  100% {z-index:0;}
}
.vertical.vFlipContainer .vFlipper {transform-origin:100% 50%; background-color:#FF8000;}
.vertical.vFlipContainer:hover .vFlipper {transform:rotateX(-180deg); background-color:#999999;}

.accTitle {
    position: absolute;
    background: transparent !important;
    top: -20px;
    left: 0;
    right: 0;
}

修改过的手风琴项目：

            <li class="vertical vFlipContainer" ontouchstart="this.classList.toggle('hover');">
                <a class="vFlipper" href="#" onclick="return false;"></a>
                <a class="accTitle" href="#" onclick="return false;">ACCORDION 1 TITLE</a>
                <ul>
                    <li>Accordion 1 Heading</li>
                    <li>Accordion 1 Text 1<br>Accordion 1 Text 2</li>
                </ul>
            </li>

对于快速修复，它可以正常工作，并且您不必将其转换为超过您已设置的-180deg。

基本上，我从background-color和#drawer.courseDrawer > ul > li > a移除了#drawer.courseDrawer > ul > li > a:hover，并分别将其添加到.vertical.vFlipContainer .vFlipper和.vertical.vFlipContainer:hover .vFlipper。这允许在项目悬停时的任何时刻发生background-color更改。然后，添加额外的class和a可以防止文本翻转。

JSFiddle：http://jsfiddle.net/zbg15rbx/

我希望这会有所帮助。 ^^

在无序列表中悬停的CSS垂直手风琴翻转

3 个答案: