jQuery翻转元素与后续元素重叠_Jquery_Html_Node.js_Ejs

jQuery翻转元素与后续元素重叠

jquery html node.js

jQuery翻转元素与后续元素重叠,jquery,html,node.js,ejs,Jquery,Html,Node.js,Ejs,我正在使用来翻转节点中ejs文件中的图像翻转动画可以工作，但翻转元素下方的任何元素都与翻转元素重叠说明我的问题的简单代码： <head> <title>James Riley</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdn.rawgit.com/nn

我正在使用来翻转节点中ejs文件中的图像

翻转动画可以工作，但翻转元素下方的任何元素都与翻转元素重叠

说明我的问题的简单代码：

<head>
     <title>James Riley</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
</head>
<body>

    <div>Something before the flip</div>
        <div id="flipImage">
            <div class="front">front content</div>
            <div class="back">back content</div>
        </div>
    <div>Something after the flip</div>

    <script type="text/javascript" src="scripts/about.js"></script>
</body>

这会导致“翻转后的内容”与前/后内容重叠。如果内容是文本，它会逐字写在后续文本上

对不起，如果这是显而易见的。谢谢你的帮助

这似乎是插件的一个已知问题：

“当我把它翻到后面，那是一个长长的侧边栏时，它就没有了展开容器以填充侧栏。相反，它只是与侧栏重叠内容……”

您可以在屏幕上查看状态

也许你会对CSS翻转技巧感兴趣？这里有一个很酷的例子

/*简单*/
.翻转容器{
-webkit透视图：1000；
-莫兹透视图：1000；
-ms透视图：1000；
前景：1 000；
-ms变换：透视图（1000px）；
-moz变换：透视图（1000px）；
-moz变换样式：preserve-3d；
-ms变换样式：preserve-3d；
边框：1px实心#ccc；
}
/*
.flip容器：悬停.flipper、.flip-container.hover.flipper、#flip-toggle.flip.flipper{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-ms变换：旋转（180度）；
变换：旋转（180度）；
过滤器：FlipH；
-ms过滤器：“FlipH”；
}
*/
/*开始：适应IE*/
.flip容器：悬停。返回，
.flip-container.hover.back{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
}
.翻转容器：悬停。前，
.翻转容器.悬停.前部{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
/*结束：为IE提供住宿*/
.翻转容器，
.前线，
.回来{
宽度：320px；
高度：427px；
}
.鳍状肢{
-webkit转换：0.6s；
-webkit变换样式：保留-3d；
-ms转换：0.6s；
-moz跃迁：0.6s；
-moz变换：透视图（1000px）；
-moz变换样式：preserve-3d；
-ms变换样式：preserve-3d；
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
.前线，
.回来{
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
-webkit转换：0.6s；
-webkit变换样式：保留-3d；
-webkit变换：旋转（0度）；
-moz跃迁：0.6s；
-moz变换样式：preserve-3d；
-moz变换：旋转（0度）；
-o-转变：0.6s；
-o变换样式：preserve-3d；
-o变换：旋转（0度）；
-ms转换：0.6s；
-ms变换样式：preserve-3d；
-ms变换：旋转（0度）；
过渡：0.6s；
变换样式：保留-3d；
变换：旋转（0度）；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
-webkit变换：旋转（0度）；
-ms变换：旋转（0度）；
背景：浅绿色；
z指数：2；
}
.回来{
背景：浅蓝色；
-webkit变换：旋转（-180度）；
-莫兹变换：旋转（-180度）；
-o变换：旋转（-180度）；
-ms变换：旋转（-180度）；
变换：旋转（-180度）；
}
.前面.姓名{
字号：2em；
显示：内联块；
背景：rgba（33,33,33,0.9）；
颜色：#F8；
字体系列：信使；
填充物：5px10px；
边界半径：5px；
底部：60px；
左：25%；
位置：绝对位置；
文本阴影：0.1em 0.1em 0.05em#333；
显示：无；
-webkit变换：旋转（-20度）；
-moz变换：旋转（-20度）；
-ms变换：旋转（-20度）；
变换：旋转（-20度）；
}
.背面标志{
位置：绝对位置；
顶部：40px；
左：90px；
宽度：160px；
高度：117px；
背景：url（logo.png）0 0不重复；
}
.封号{
字体大小：粗体；
颜色：#00304a；
位置：绝对位置；
顶部：180像素；
左：0；
右：0；
文本对齐：居中；
文本阴影：0.1em 0.1em 0.05em#acd7e5；
字体系列：信使；
字体大小：22px；
}
.backp{
位置：绝对位置；
底部：40px；
左：0；
右：0；
文本对齐：居中；
填充：0 20px；
字号：18px；
}
/*垂直的*/
.垂直翻转容器{
位置：相对位置；
}
.垂直，向后{
-webkit变换：rotateX（180度）；
-moz变换：rotateX（180度）；
-ms变换：rotateX（180度）；
变换：rotateX（180度）；
}
.vertical.flip-container.flipper{
-webkit转换来源：100%213.5px；
-moz变换原点：100%213.5px；
-ms变换原点：100%213.5px；
变换原点：100%213.5px；
}
/*
.垂直.翻转容器：悬停.翻转器{
-webkit变换：rotateX（-180度）；
-moz变换：rotateX（-180度）；
-ms变换：rotateX（-180度）；
变换：rotateX（-180度）；
}
*/
/*开始：适应IE*/
.垂直。翻转容器：悬停。返回，
.vertical.flip-container.hover.back{
-webkit变换：rotateX（0度）；
-moz变换：rotateX（0度）；
-o变换：旋转（0度）；
-ms变换：rotateX（0度）；
变换：旋转（0度）；
}
.垂直。翻转容器：悬停。前，
.vertical.flip-container.hover.front{
-webkit变换：rotateX（180度）；
-moz变换：rotateX（180度）；
-o变换：旋转（180度）；
变换：rotateX（180度）；
}
/*结束：适应IE*/

将鼠标悬停在下面的图像上以查看其翻转
样式卡（水平翻转）
大卫·沃什
@戴维德瓦尔斯堡
Mozilla Web开发者、MooTools&jQuery顾问、MooTools核心开发者、Javascript狂热者、CSS修补者、PHP黑客和Web爱好者




样式卡（垂直翻转）
大卫·沃什
@戴维德瓦尔斯堡
Mozilla Web开发者、MooTools&jQuery顾问、MooTools核心开发者、Javascript狂热者、CSS修补者、PHP黑客和Web爱好者




切换翻转（水平）
$("#flipImage").flip();

var height =  $("#flipImage").outerHeight();
$("#flipImage").flip().height(height);

display:flex;
justify-content: flex-start