CODEWITHSUNDEEP
htmlcsstexthover
mrjodicow
mrjodicow

Reputation: 71

Make text appear upside down, CSS and HTML5

I am making cards that flip on hover using CSS and HTML and originally had them flip using transform: rotateY(180deg); but after peer feedback, I decided to use rotateX(180deg); instead. Problem is, upon flip the text now appears upside down. How could I get it so that the text appears properly on flip? Here is an example of what the code currently does:

CSS

  #f3_container {
  position: relative;
  /*margin: 10px auto;*/
  width: 24vw;
  height: 281px;
  z-index: 1;
  padding-top: .563em;
  padding-left: .444%;
  padding-right: .75%;
  display: flex;
  order: 4;
}

#f3_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}

#f3_container:hover #f3_card {
  transform: rotateX(180deg);
}

HTML

<div id="f3_container">
    <div id="f3_card">
    <div class="front face">
        <h2>Sample&nbsp;<sup>+</sup></h2>
    </div>
    <div class="back face center">
        <ul>
            <li>Sample</li>
            <li>Sample</li>
            <li>Sample</li>
        </ul>
    </div>
    </div>
    </div>

Upvotes: 2

Views: 7159

Answers (1)

CaliCo
CaliCo

Reputation: 388

See the following example here, run the snippet to see said animation:

$('.card').click(function(){
  $(this).toggleClass('flipped');
});
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);

body {
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4em;
  color: #333;
  background: #eee;
}

input,
button {
  font-family: 'Roboto Slab', serif;
  font-weight: 300;
  font-size: 16px;
  border: 0;
  padding: 3px 5px;
  border-radius: 3px;
}

h1 {
  margin: 0.5em 0 1em 0;
  font-size: 1.8em;
  font-weight: 700;
  color: #096AA3;
}

h2, h3 {
  font-weight: bold;
}

p {
  margin-bottom: 1em;
}

.animation {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.wrapper {
  width: 80%;
  padding: 4%;
  margin: 20px auto;
  background: #fff;
}

.wrapper.cards {
  background: 0;
  width: 88%;
  padding: 20px 0 0 0;
}

.container {
  position: relative;
  float: left;
  width: 48%;
  height: 260px;
  margin: 10px 0 10px 4%;
  background: #fff;
  
  
  /* Set the depth of the elements */
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}

.container:first-child {
  margin-left: 0;
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
  
  
  /* Set the transition effects */
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  -o-transition: -o-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card.flipped {
  -webkit-transform: rotateX( 180deg );
  -moz-transform: rotateX( 180deg );
  -o-transform: rotateX( 180deg );
  transform: rotateX( 180deg );
}

.card .front,
.card .back {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-size: 4em;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  
  box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}

.card .back {
  width: 94%;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 16px;
  text-align: left;
  line-height: 25px;
 
}

.formItem:first-child {
  margin-top: 20px;
}

.card .back label {
  display: inline-block;
  width: 70px;
  text-align: left;
}

.card .front {
  background: #222222;
}

.card .back {
  background: #444444;
  -webkit-transform: rotateX( 180deg );
  -moz-transform: rotateX( 180deg );
  -o-transform: rotateX( 180deg );
  transform: rotateX( 180deg );
}

.container:first-child .card .front {
  background: #228653;
}

.container:first-child .card .back {
  background: #007539;
}

.cardTitle {
  font-size: 1.4em;
  line-height: 1.2em;
  margin: 0;
}

.content {
  padding: 4%;
  font-weight: 100;
  text-align: left;
}

button.btnSend {
  display: inline-block;
  min-width: 100px;
  padding: 3px 5px;
  margin-top: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #03446A;
  background: #fff;
  border: 0;
  border-radius: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="card">
      <div class="front"><h2>Text</h2></div>
      <div class="back">
        <div class="content">
          <h3 class="cardTitle">Content here</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sodales, mi ac vulputate blandit, libero nulla bibendum quam.</p>
        </div>
      </div>
    </div>
  </div>
</div>

What you need to remember is after rotating the card, the content from the back-side of the respective card needs to be transformed back such that it's not inverted. The example provided utilizes the same style of 'flipping' animation as you mentioned, and fixes the content after the 'flip' happens. Hope this helps, good luck!

Upvotes: 3

Related Questions