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 lucasseribeiro
      Bons dias, fórum!
       
      Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam!
      Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens...
      Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso???
       
      Grato desde já!
       
      Lucas Ribeiro
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By Sapinn
      Estou com dificuldade para chamar um arquivo CSS usando a configuração de um arquivo php. O bootstrap também não surte efeito na paginas
       
      Vejam só
      Config.php
       
      <?php define('APP_NOME','Projeto GIBI'); define('URL','http://localhost/bora_php');  
       
      index.php
       
      <?php include './../app/configuracao.php'; include './../app/Libraries/Rota.php'; include './../app/Libraries/Controller.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="<?=URL?>/public/css/estilos.css">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >         <title><?= APP_NOME?></title> </head> <body>     <?php         $rotas = new Rota();     ?>     <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script> <script src="<?=URL?>/public/css/script.js" ></script> </body> </html> estilo.css
      html{     background-color: red; }  
      Estou tentando seguir a padronização MVC(que por sinal eu tenho certa dificuldade), então não consigo achar onde estou errando
    • By luiz monteiro
      Tudo bem pessoal!
      Estou há alguns dias pesquisando e usando diferentes dicas para resolver o problema para que a borda inferior de 1px aplicada em quatro boxes sejam exibidas igualmente no chrome, safari, mozilla, opera e IE.
      A estrutura é a seguinte:
       
      ==========CSS
       
      html, body, span, p, form, img, a, ul, ol, li, table, tr, td, div
      {
          margin: 0px;
          padding: 0px; 
          border:none; 
          outline:none;
          list-style-type:none;
          box-sizing: border-box;
      }
       
      *
      {
          font-size: 14px;
          font-family: verdana, arial;
      }
       
      .container
      {
          width: 608px;
          height: 421px;
          margin: auto;
          margin-top: 50px;
          overflow: hidden;
      }
       
      .box_one, .box_two
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          overflow: hidden;
      }
       
      .border_bottom
      {
          border-bottom: #f5f5f5 solid 1px;
      }
       
      .border_bottom_white
      {
          border-bottom: #fff solid 1px;
      }
       
      .espaco
      {
          margin-right: 2px;
      }
       
      .box_tree, .box_four, .box_fift
      {
          display: inline-block;
          width: 198px;
          height: 149px;
          margin-top: 20px;
          overflow: hidden;
      }
       
      .vertical
      {
          vertical-align: top;
      }
       
       
       
      ============HTML
       
         <content>

              <div class="container">
       
                  <div class="box_one border_bottom_white espaco vertical">box one in first line</div>
                  <div class="box_two border_bottom vertical">box two in first line</div>
                  <div class="box_tree espaco border_bottom vertical">box tree in second line</div>
                  <div class="box_four espaco border_bottom vertical">box four in second line</div>
                  <div class="box_fift border_bottom vertical">box fift in second line</div>
            
          </div>
       
       </content>
       
      O que ocorre é que cada navegador exibe de uma maneira diferente, mesmo resetando o box-sizing: border-box;  o font-size e o font-family.
      Essa configuração do CSS foi a mais próxima do desejável.
      A estrutura do HTML precisa ser essa aí.
      Agradeço desde já.
       
       
       
       
×

Important Information

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