html – 需要帮助来翻转css3中的div_html-js-css

概述我试图将div从前侧垂直翻转到后侧,然后将其恢复.但是当我悬停而不是翻转时,它被折叠成一条细条.问题是什么？ [水平翻转工作正常.当我将其改为垂直翻转时出现问题] <html><head><style type="text/css"> /* entire container, keeps perspective */.flip-container { perspective 我试图将div从前侧垂直翻转到后侧,然后将其恢复.但是当我悬停而不是翻转时,它被折叠成一条细条.问题是什么？
[水平翻转工作正常.当我将其改为垂直翻转时出现问题]

<HTML><head><style type="text/CSS">    /* entire container,keeps perspective */.flip-container {    perspective: 1000;}    /* flip the pane when hovered */    .flip-container:hover .flipper,.flip-container.hover .flipper {        transform: rotateX(180deg);    }.flip-container,.front,.back {    wIDth: 320px;    height: 480px;}/* flip speed goes here */.flipper {    Transition: 0.6s;    transform-style: preserve-3d;    position: relative;}/* hIDe back of pane during swap */.front,.back {    backface-visibility: hIDden;    position: absolute;    top: 0;    left: 0;}/* front pane,placed above back */.front {    z-index: 2;    background-color:red;}/* back,initially hIDden pane */.back {    transform: rotateY(180deg);    background-color:green; }.vertical.flip-container {    position: relative;}    .vertical .back {        transform: rotateX(180deg);    }    .vertical.flip-container .flipper {        transform-origin: 100% 213.5px; /* half of height */    }    .vertical.flip-container:hover .flipper {        transform: rotateX(-180deg);    }</style></head><body><div  ontouchstart="this.classList.toggle('hover');">    <div >        <div >            Front SIDe        </div>        <div >            Back SIDe        </div></div></div></body></HTML>

解决方法只需将所有的rotate都设置为rotateXs,并确保将类垂直添加到容器中(因为你在CSS中有它而不是HTML)

Working demo

改变了HTML

<div  ontouchstart="this.classList.toggle('hover');">

更新了CSS

/* entire container,keeps perspective */.flip-container {    perspective: 1000px;}.flip-container,.back {    wIDth: 320px;    height: 480px;}/* flip speed goes here */.flipper {    Transition: 0.6s;    transform-style: preserve-3d;    position: relative;}/* hIDe back of pane during swap */.front,.back {    position: absolute;    top: 0;    left: 0;    backface-visibility:hIDden;    -webkit-backface-visibility:hIDden;}/* front pane,placed above back */.front {    z-index: 1;    background-color:red;}/* back,initially hIDden pane */.back {    transform: rotateX(-180deg);    background-color:green;     animation: toFront 0.3s linear normal forwards;}.vertical.flip-container {    position: relative;}.vertical.flip-container:hover .back {    animation-delay: 0.3s;    animation: toBack 0.3s linear normal  forwards;}@keyframes toBack {    0% {z-index:0;}  100% {z-index:1;}}@keyframes toFront {  0% {z-index:1;}  100% {z-index:0;}}.vertical.flip-container .flipper {    transform-origin: 100% 240px; /* half of height */}.vertical.flip-container:hover .flipper {    transform: rotateX(-180deg);}

我也使用CSS3动画添加了全部功能

总结

以上是内存溢出为你收集整理的html – 需要帮助来翻转css3中的div全部内容，希望文章能够帮你解决html – 需要帮助来翻转css3中的div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/1077506.html