Flip de rotação invade o rodapé

Camilavip · Julho 3, 2020

Oi, tenho um flip para virar a imagem, bem pequeno e funcional, mas ao colocar um rodapé, ele simplesmente invade esse rodapé

Creio que tem haver alguma coisa com o position: absolute, mas não entendo nada de css

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
   
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  </head>
  <body>

    <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>
    
      
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>
</div>



                                <!-- AQUI COMEÇA O RODAPÉ -->

<!-- CSS DO RODAPÉ -->
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  color: #d9d9d9;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.content1{
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}
.content1 .text{
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}
.content1 .p{
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}
footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}
.main-content{
  display: flex;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: absolute;
  content: '';
  top: -10px;
  height: 2px;
  width: 100%;
  background: #1a1a1a;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #f12020;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;
}
.left .content .social a{
  padding: 0 2px;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #f12020;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #f12020;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: #656565;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form .msgForm{
  width: 100%;
  font-size: 1.0625rem;
  background: #151515;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form .msgForm:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  background: #f12020;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: #000;
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
  background: #151515;
}
.bottom center span{
  color: #656565;
}
.bottom center a{
  color: #f12020;
  text-decoration: none;
}
.bottom center a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 900px) {
  footer{
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }
}
</style> 



 <div class="content1">
      <div class="text">
Fully Responsive Footer Section</div>
<div class="p">
HTML and CSS (Flexbox)</div>
</div>
<footer>
      <div class="main-content">
        <div class="left box">
          <h2>
About us</h2>
<div class="content">
            <p>
CodinNepal is a YouTube channel where you can learn web designing, web development, ui/ux designing, html css tutorial, hover animation and effects, javascript and jquery tutorial and related so on.</p>
<div class="social">
              <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
              <a href="#"><span class="fab fa-twitter"></span></a>
              <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a>
              <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a>
            </div>
</div>
</div>
<div class="center box">
          <h2>
Address</h2>
<div class="content">
            <div class="place">
              <span class="fas fa-map-marker-alt"></span>
              <span class="text">Birendranagar, Surkhet</span>
            </div>
<div class="phone">
              <span class="fas fa-phone-alt"></span>
              <span class="text">+089-765432100</span>
            </div>
<div class="email">
              <span class="fas fa-envelope"></span>
              <span class="text">abc@example.com</span>
            </div>
</div>
</div>
<div class="right box">
          <h2>
Contact us</h2>
<div class="content">
            <form action="#">
              <div class="email">
                <div class="text">
Email *</div>
<input type="email" required>
              </div>
<div class="msg">
                <div class="text">
Message *</div>
<!-- NOTE: Due to more textarea tag I got an error. So I changed the textarea name to changeit. Please change that changeit name to textarea -->
<changeit id=".msgForm" rows="2" cols="25" required></changeit> <!-- replace this changeit name to textarea -->
              
              <br />
<div class="btn">
<button type="submit">Send</button>
              </div>
<div class="bottom">
<center>
          <span class="credit">Created By <a href="https://youtube.com/c/codingnepal">CodingNepal</a> | </span>
          <span class="far fa-copyright"></span> 2020 All rights reserved.
        </center>
</div>

 </body>
</html>

Sherlock02 · Julho 4, 2020

Olá,

Basta acrescentar uma div "container" com o tamanho que deseja e o position relative.

<div class="container">
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>

</div>
      </center> 
</div><!-- container relative -->

.container{
  width: 500px;
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

O position absolute tem que ficar dentro do relative. Isso acontece porque o "absoluto" precisa de um ponto de referência.

Aqui tem a explicação: https://tableless.com.br/propriedade-position-do-css.

Abraços!

Camilavip · Julho 4, 2020

5 horas atrás, Sherlock02 disse:

Olá,

Basta acrescentar uma div "container" com o tamanho que deseja e o position relative.


<div class="container">
  <center> 
  <div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/zohO24tyN2WB8etR3nhZPvhf.png" />
    </div>
    <div class="back">
      <img src="https://d3mwk3f7r8fv9u.cloudfront.net/images/XkAkTVqVPbLB3cK5njqdun66.png" />
    </div>
  </div>

</div>
      </center> 
</div><!-- container relative -->


.container{
  width: 500px;
  max-width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

O position absolute tem que ficar dentro do relative. Isso acontece porque o "absoluto" precisa de um ponto de referência.

Aqui tem a explicação: https://tableless.com.br/propriedade-position-do-css.

Abraços!

Mas dessa forma ele me obriga com o container não tomar todo o espaço da tela, e fico limitada a definir tamanhos em pixels, quando troco os pixels por porcentagens, ele volta ao mesmo problema

Sherlock02 · Julho 5, 2020

Olá,

Eu não entendi exatamente o que você quis dizer, porque basta trocar o código por width: 100%.

  .container{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }

Aqui está o exemplo do código trocando somente o width de pixels para porcentagem ocupando a largura total, e ainda acrescentei um header, só para você ver como ficaria:

Redimensione a tela para ver a versão mobile e desktop.

https://jsfiddle.net/7s40zkja

O único "problema" do seu código é ter colocado um footer fixo (na verdade não é um problema, só é estranho). Eu pensei que fosse sua preferência, mas agora acho que entendi que é a isso que você estava se referindo.

Substitua esse código:

footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}

Por esse:

footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  background: #111;
}

E o resultado será esse: https://jsfiddle.net/x4tfv98m

Seria isso o que você precisava?

Camilavip · Julho 8, 2020

Em 05/07/2020 at 10:07, Sherlock02 disse:
Olá,

Eu não entendi exatamente o que você quis dizer, porque basta trocar o código por width: 100%.
  .container{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  display: block;
  position: relative;
  background: gray;
  }  
Aqui está o exemplo do código trocando somente o width de pixels para porcentagem ocupando a largura total, e ainda acrescentei um header, só para você ver como ficaria:

Redimensione a tela para ver a versão mobile e desktop.

https://jsfiddle.net/7s40zkja

O único "problema" do seu código é ter colocado um footer fixo (na verdade não é um problema, só é estranho). Eu pensei que fosse sua preferência, mas agora acho que entendi que é a isso que você estava se referindo.

Substitua esse código:
footer{
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: #111;
}
Por esse:
footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  background: #111;
}
E o resultado será esse: https://jsfiddle.net/x4tfv98m

Seria isso o que você precisava?

Tento e não da, o flip continua invadindo o rodapé

Sherlock02 · Julho 8, 2020

Olá,

Teria como você tirar um print de como está no seu site de testes e outra imagem representando o que você gostaria de fazer?

Porque se você realmente tentar deixar o footer fixed, é impossível ele não invadir, porque é como colocar um menu fixo no topo. A função dele é ficar sobre qualquer outro elemento da página.

Agora você diz que o flip invade o rodapé, e não o rodapé que invade o flip, e no exemplo que te enviei isso não acontece. Cada um está em seu próprio bloco.

Camilavip · Julho 8, 2020

2 horas atrás, Sherlock02 disse:

Olá,

Teria como você tirar um print de como está no seu site de testes e outra imagem representando o que você gostaria de fazer?

Porque se você realmente tentar deixar o footer fixed, é impossível ele não invadir, porque é como colocar um menu fixo no topo. A função dele é ficar sobre qualquer outro elemento da página.

Agora você diz que o flip invade o rodapé, e não o rodapé que invade o flip, e no exemplo que te enviei isso não acontece. Cada um está em seu próprio bloco.

Resolvi o problema, alterei o css original do flip

 <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>

Por esse abaixo, agora tudo está resolvido.

<style>
.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

</style>

Realmente o problema estava no position: absolute

Sherlock02 · Julho 8, 2020

4 horas atrás, Camilavip disse:

Resolvi o problema, alterei o css original do flip


 <!-- CSS DO FLIP -->
 <style> 
  .flip-container:hover .flipper{
    transform: rotateY(180deg);
    /* se quiser uma animação na vertical,
    troque por rotateX(180deg)
    */
}
.flipper{
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.front, .back{
    position: absolute;
    width: 100%;
    height: 100%;
}
.back{
    transform: rotateY(180deg);
}

</style>

Por esse abaixo, agora tudo está resolvido.


<style>
.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

</style>

Realmente o problema estava no position: absolute

Que bom que conseguiu!

Abraços!

Flip de rotação invade o rodapé

Recommended Posts

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sherlock02 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sherlock02 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sherlock02 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camilavip 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sherlock02 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Fóruns

Tempo Real

Informação importante