CSS - 翻转悬停效果只发生一次

时间：2017-09-25 10:22:44

标签： html css css3

我的网站中有section，效果为flip-hover。客户已询问，flip是否可以限制为front-to-back，然后back-to-front自动翻转，一旦光标移除，任何将来的flips仅由{{click发生1}}。基本上他们不希望行动自动发生，只是每次访问一次。我认为他们认为如果用户在浏览网站时不断发生这种情况可能会有点烦人。 这是否可能，如果是这样，我该怎么做？

以下是代码 - 

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800);
body {
  font-family: 'Montserrat', sans-serif !important;
}

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* Parallax flipping cards - Codepen */


/* *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
} */

h1 {
  font-size: 3rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.container-fluid {
  /* width: 90%; */
  margin: 0px auto;
  /*  max-width: 80rem; */
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.col-sm-3 {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  height: 300px;
  width: 300px;
  float: left;
  margin: 0 20px 0 0;
  /* padding: 10px; */
  cursor: pointer;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  /* size of box */
  min-height: 300px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  color: #000;
  font-size: 1rem;
}

.back {
  /* background: #fff; 
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%); */
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 300px;
  height: 300px;
  content: '';
  display: block;
  /* background shade - was .6 originally */
  opacity: .;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 0px solid;
}

.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  font-size 1rem;
  text-align: left;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /*  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /*   -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container:hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.container:hover .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.front .inner p {
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  position: absolute;
  background: #000;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: ;
}
<section id="whatwedo">
  <div class="container-fluid">
    <h1>What we do</h1>

    <div class="cols">
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Identity</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Graphic Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Editorial Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Guidelines</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Print Management</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Signage</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Creative Direction</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Illustration & Animation</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

3 个答案:

答案 0 :(得分：1)

这应该可以帮助您入门。

首先在悬停上工作。之后点击:)

＆＃13;
＆＃13; 
var containers = document.querySelectorAll('.container');

containers.forEach(container => {

  container.addEventListener('mouseenter', function() {
    if (!container.classList.contains('flipcomplete')) {
      container.classList.add('flipped');
    }

  });
  container.addEventListener('mouseleave', function() {
    if (!container.classList.contains('flipcomplete')) {
      container.classList.remove('flipped');
      container.classList.add('flipcomplete');

    }
  });
  

container.addEventListener('click', function() {
    container.classList.toggle('flipped');

  });

});
＆＃13; 
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800);
body {
  font-family: 'Montserrat', sans-serif !important;
}

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* Parallax flipping cards - Codepen */


/* *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
} */

h1 {
  font-size: 3rem;
  font-family: 'Montserrat';
  font-weight: normal;
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.container-fluid {
  /* width: 90%; */
  margin: 0px auto;
  /*  max-width: 80rem; */
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.col-sm-3 {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  height: 300px;
  width: 300px;
  float: left;
  margin: 0 20px 0 0;
  /* padding: 10px; */
  cursor: pointer;
}

.container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.front,
.back {
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-align: center;
  /* size of box */
  min-height: 300px;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  color: #000;
  font-size: 1rem;
}

.back {
  /* background: #fff; 
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%); */
}

.front:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 300px;
  height: 300px;
  content: '';
  display: block;
  /* background shade - was .6 originally */
  opacity: .;
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  border: 0px solid;
}

.container:hover .front,
.container:hover .back {
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  font-size 1rem;
  text-align: left;
}

.inner {
  -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
  transform: translateY(-50%) translateZ(60px) scale(0.94);
  top: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  padding: 2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 1px solid transparent;
  -webkit-perspective: inherit;
  perspective: inherit;
  z-index: 2;
}

.container .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /*  -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /*   -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; */
}

.container.flipped .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.container.flipped .front {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  /* -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d; */
}

.front .inner p {
  font-size: 3rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after {
  content: '';
  width: 4rem;
  position: absolute;
  background: #000;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: ;
}
＆＃13; 
<section id="whatwedo">
  <div class="container-fluid">
    <h1>What we do</h1>

    <div class="cols">
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Identity</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Graphic Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Editorial Design</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Brand Guidelines</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Print Management</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Signage</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Creative Direction</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');">
          <div class="container">
            <div class="front">
              <div class="inner">
                <p>Illustration & Animation</p>

              </div>
            </div>
            <div class="back">
              <div class="inner">
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以从Run CSS3 animation only once (at page loading)

获取一些信息

我认为仅使用CSS是不可能的。你可以添加一些javacript，以便在一个属性悬停后切换它，并在CSS中一次性使用它。

答案 2 :(得分：0)

如果您在使用jQuery时没有问题，只需使用库“jQuery Flip”。

相关问题
最新问题