Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marquinhoscw

virar imagem(180deg)html e css

Recommended Posts

Boa tarde pessoal.

Entao... gostaria de ajuda. estou tentando criar uma galeria de fotos onde se você aproximar o mouse sobre a imagem, vire em 180 graus. Porém estou tento bastante dificuldades

segue o codigo  HTML...

<DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Galeria de imagens</title>
    <link rel="stylesheet" href="_css/fotos.css"/>
</head>
<body>
<section id="principal">
<ul id="album-fotos">
    <li id="foto01"><span></span></li>
    <li id="foto02"><span></span></li>
    <li id="foto03"><span></span></li>
    <li id="foto04"><span></span></li>
    <li id="foto05"><span></span></li>
    <li id="foto06"><span></span></li>
    <li id="foto07"><span></span></li>
    <li id="foto08"><span></span></li>
    <li id="foto09"><span></span></li>
    <li id="foto10"><span></span></li>
    <li id="foto11"><span></span></li>
    <li id="foto12"><span></span></li>
    <li id="foto13"><span></span></li>
    <li id="foto14"><span></span></li>
    <li id="foto15"><span></span></li>
    <li id="foto16"><span></span></li>
</ul>
</section>
</body>
</html>

     CSS....

@charset "UTF-8";

ul#album-fotos li{
    float: left;
    width: 150px;
    height: 150px;
    margin: 10px;
    border: 5px solid #fff;
    background-color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,.4);
    list-style: none;
}
ul#album-fotos li#foto01 {
    background: url('galeria-01.jpg') no-repeat; 
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li:hover {
    transform: rotateY(180deg);
}
ul#album-fotos li#foto02 {
    background: url('galeria-02.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto03 {
    background: url('galeria-03.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto04 {
    background: url('galeria-04.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto05 {
    background: url('galeria-05.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto06 {
    background: url('galeria-06.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto07 {
    background: url('galeria-07.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto08 {
    background: url('galeria-08.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto09 {
    background: url('galeria-09.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto10 {
    background: url('galeria10.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto11 {
    background: url('galeria11.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto12 {
    background: url('galeria12.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto13 {
    background: url('galeria13.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto14 {
    background: url('galeria14.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto15 {
    background: url('galeria15.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
ul#album-fotos li#foto16 {
    background: url('galeria16.jpg') no-repeat;
    background-position: 50% 50%;
    background-size: 300px 300px;
    background-color: #ffffff;
}
#principal {
    width: 900px;
    height: auto;
    margin: 0 auto;
    background: #fff;

}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 24/04/2018 at 12:08, Maujor disse:

A regra CSS existente rotaciona em 180graus.
O que mais você deseja fazer?


ul#album-fotos li:hover {
  transform: rotateY(180deg)
}

 

então tenho que fazer isso....imagem em baixo... ao  mover o mouse na foto ela vira e aparece uma frase atras. porem até agr só consegui fazer a parte de dentro da imagem virar. 

virar.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Marquinhoscw Quando for postar códigos use a ferramenta code do editor aqui do fórum, assim como o moderador editou seu post.

E se for postar muitas linhas de código use a ferramenta spoiler, assim você evita sujar seu tópico. E não há necessidade de postar toda uma estrutura para uma simples questão pois somente se trata de um coisa em específico, não sendo necessários mais de 90% do que mostrou (obs.: nem cheguei a ler o que postou como código)

 

 

A regra CSS é simples: Elemento pai quando sofrer evento hover altere seu elemento filho

.elemento-pai:hover > .elemento-filho {
    /* Propriedades para serem válidas no elemento filho quando o pai estiver sobre hover */
 }

 

Veja o exemplo de como proceder: https://jsfiddle.net/

 

Citar

Nota.: No seu caso você quer exibir um texto quando a imagem girar.

Esse texto é o elemento filho que deve ter a propriedade display:none;

Quando o evento hover ser ativado, o elemento filho deve-se alterar de display:none para display:block.

Se for para manter a imagem virada mesmo que o cursor saia de cima, é necessário a intervenção de javascript.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

O efeito que você procura denomina-se: Animação flipping com CSS.
Nesta página  você encontra exemplos da animação e o link no final

da página abre a página do tutorial que explica como fazer a animação.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Carlos Web Soluções Web
      Olá...
      Estou tentando fazer o seguinte !!
      Listando dados em tabela !!
      Gostaria que....se na listagem houver 4 linhas...indepedente de seu número de ID, faça a listagem em ID ser em ordem 1 2 3 4 !!
      Exemplo...se tiver uma listagem de dados que está em ID 1 3 3...faça ficar 1 2 3 !!

       
      echo "<table class='tabela_dados' border='1'> <tr> <td>ID</td> <td>Nome Empresa</td> <td>Responsável</td> <td>Telefone 1</td> <td>Telefone 2</td> <td>E-mail 1</td> <td>E-mail 2</td> <td>Endereço</td> <td>CEP</td> <td>Bairro</td> <td>AÇÃO 1</td> <td>AÇÃO 2</td> </tr> "; $sql = "SELECT ID FROM usuarios_dados WHERE Usuario='$usuario'"; $result = $conn->query($sql); $num_rows = $result->num_rows; $Novo_ID = 1; for ($i = 0; $i < $num_rows; $i++) { $registro = $result -> fetch_row(); $sql2 = "UPDATE usuarios_dados SET ID='$Novo_ID' WHERE ID='$Novo_ID'"; $result2 = $conn->query($sql2); $Novo_ID++; } $sql = "SELECT * FROM usuarios_dados"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<tr> <td>$row[ID]</td> <td>$row[Nome_Empresa]</td> <td>$row[Responsavel]</td> <td>$row[Telefone_1]</td> <td>$row[Telefone_2]</td> <td>$row[Email_1]</td> <td>$row[Email_2]</td> <td>$row[Endereço]</td> <td>$row[CEP]</td> <td>$row[Bairro]</td> <td> <form method='post' action='Editar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='EDITAR'> </form> </td> <td> <form method='post' action='Deletar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='DELETAR'> </form> </td> </tr> "; } } else { echo "0 results"; } $conn->close();  
    • Por Carlos Antoliv
      Olá, senhores.
       
      Sei que existem diversos tópicos por aí sobre esse assunto, contudo, não consegui solucionar o problema, mesmo depois de 1 dia tentando fazer algo até simples.
       
      Seguinte, estou pegando o id de um produto e tentando jogar em outra tabela, pelo checkbox.
      ex:
       
      id    produto
      23   lapis
      43  caneta
       
      pelo checkbox, a pessoa escolhe o produto e adicona em uma lista, que é outro banco. Se pessoa selecionar mais de 1 item da lista, o laço só envia para o banco apenas 1 item de qualquer forma.
       
      Vou postar o Código:
       
      Código do INSERT:
       
          $check1 = (isset($_POST["check"]) && $_POST["check"] != null) ? $_POST["check"] : "";     foreach($check1 as $check){                         $stmt = $conexao->prepare("INSERT INTO tb_itemProdKit (fk_tb_kit, fk_usuarios, fk_tb_produtos) VALUES (?, ?, ?)");                  $stmt->bindParam(1, $nome_prod);         $stmt->bindParam(2, $idSessao);         $stmt->bindParam(3, $check);                if ($stmt->execute()) {             if ($stmt->rowCount() > 0) {                 echo "Dados cadastrados com sucesso!";                 $id_prod = null;                 $nome_prod = null;                 $idSessao = null;                 $check = null;                             header("Location: item-produto-kit.php");exit;                              } else {                 echo "Erro ao tentar efetivar cadastro";             }         } else {                throw new PDOException("Erro: Não foi possível executar a declaração sql");         }     } } } catch (PDOException $erro) {         echo "Erro: " . $erro->getMessage();     }    
       
      Agora o código do checkbox:
       
             if ($stmt->execute()) {                 while ($rs = $stmt->fetch(PDO::FETCH_OBJ)) {                       echo "<tr>";                     echo "<td><input type='checkbox' name='check[]' id='check' value='".$rs->id_prod."'</td><td class='lista_usuario'>".$rs->nome_produto."</td><td class='lista_usuario'>".$rs->desc_prod."</td><td class='lista_usuario'>".$rs->peso_liq_prod                                ."</td>"                                ;                     echo "</tr>";                 }             }else {                 echo "Erro: Não foi possível recuperar os dados do banco de dados";             }     } catch (PDOException $erro) {         echo "Erro: ".$erro->getMessage();     }     echo "</form>"    
          ?>  
       
       
      Está cadastrando apenas 1 item e não múltiplos itens.
       
      abço!!
       
       
       
       
       
    • Por douglas79
      Bom dia,
       
      Estou seguindo uma vídeo aula no Youtube e o instrutor lá colocou uma sequência de div's (seja id ou class), o seletor background não funciona.

      Vou postar o código até o momento:
       
      @charset "utf-8";
       
      body, ul{padding:0;margin:0;background: #e2e2e2;list-style: none;}
      #geral{overflow: hidden;}
      #geral #topo{width:1018px;margin:0 auto;overflow: hidden;}
      #geral #topo #logo, #menuTopo{float:left;width:400px;}
      #geral #topo #logo{background:#ccc;}
      #geral #topo #menuTopo{}
      #geral #topo #menuTopo li{float:left;padding:5px;}

      Alguém pode me tirar essa dúvida???
      Desde já, agradeço!
    • Por Gildvan Arley
      <?php $consulta = $conexao->query('SELECT * FROM nomevip '); while ($exibir=$consulta->fetch(PDO::FETCH_ASSOC)){ ?> Olá
      Como posso remover 13 ids desse SELECT do 1 ao 13 
    • Por denys017
      Bom dia, boa tarde ou boa noite, bem o que quero fazer é o seguinte eu salvei o nome de algumas imagens no banco e quero ligar elas a um id de usuario, para que na hora de exibir as imagens só exiba as imagens que estejam ligadas/cadastradas com aquele usuario, resumindo quero saber como faço para ligar os campos das imagens cadastrada ao campo do usuario no sql.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.