Jump to content
Camilavip

Flip de rotação invade o rodapé

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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!

 

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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é

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By Leonel57
      Prezados,
      Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.
      Ele é um menu de produtos.
      Poderiam me ajudar?
      <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style type="text/css"> .container { border: 1px solid gray; display: inline-block; float: right; margin-right: 150px; margin-left: 300px; border-spacing: 5px; padding: :5px; } p { text-align:center; } .menulateral{ background-color:#5F9EA0; width: 250px; height: 1000px; } ul{ list-style: none; } ul li a{ display: block; font-size: 18px; font-family: 'Arial'; padding: 10px; border-bottom: solid 1px #FFFFF0; color: #ccc; text-decoration: none; } ul li span{ float: right; padding-right: 10px; } ul li a:hover{ background-color: #5b859a; } .conteudo{ display: table; } </style> </head> <body> <nav class = menulateral> <ul> <li><a href="racao-cachorro.html">Ração para Cachorros</a></li> <li><a href="">Peticos e Ossos</a></li> <li><a href="">Casas e Tocas</a></li> <li><a href="">Coleiras</a></li> <li><a href="">Tapetes e Fraldas</a></li> <li><a href="">Briquendos</a></li> <li><a href="">Camas e Cobertores</a></li> <li><a href="">Portões</a></li> <li><a href="">Grades</a></li> </ul> <ul> <li><a href="petisco-gato.html">Petiscos para Gatos</a></li> <li><a href="areia-gato.html">Areia</a></li> <li><a href="">Beleza e Limpeza</a></li> <li><a href="">Arranhadores e Brinquedos</a></li> <li><a href="">Coleiras e Peitorais</a></li> <li><a href="">Roupas</a></li> </ul> <ul> <li><a href="alimentacao-passaro.html">Alimentacao</a></li> <li><a href="gaiola-passaro.html">Gaiolas</a></li> <li><a href="">Puleiro</a></li> <li><a href="">Acessorios</a></li> <li><a href="">Farmácia</a></li> </ul> <ul> <li><a href="alimentacao-peixe.html">Alimentacao</a></li> <li><a href="aquario-peixe.html">Aquários</a></li> <li><a href="">Decoração</a></li> </ul> </nav> <nav class = "conteudo"> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> </div> </nav> </body> </html>  



    • By emmanuelsiqueira30
      Pessoal boa tarde.
      Gostaria de saber como posso pegar os valores da linha na tabela <table> que eu clicar no link visualizar dados na coluna opções e aparecer dados do banco daquela linha.
       
       
       
       
    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.