CSS3 Animáció klikkelésre induljon, és menjen végig. (Javascript nélkül)

CSS3 Animáció klikkelésre induljon, és menjen végig. (Javascript nélkül)
2021-12-16T09:00:04+01:00
2021-12-16T12:51:33+01:00
2022-10-15T21:20:41+02:00
GZolee79
Sziasztok!

Csináltam egy próba animációt, ami kis kártyákat fordít meg. Jelenleg úgy, hogy amíg nyomva tartom az egér bal gombját, addig fordul, ha felengedem visszafordul.

Azt szeretném, hogy ha egyet klikkelek akkor ha felengedem is a gombot akkor is forduljon meg és maradjon úgy.
Ha a hátoldalára klikkelek akkor pedig visszafelé játsza le az animációt, vagyis fordítsa vissza az adott kártyát.
Meg lehet ezt oldani javascript nélkül? Az a sejtésem, hogy igen, de nem sikerül rátalálni a megoldásra :)

A HTML kód:

<!DOCTYPE html> <html lang="hu"> <meta charset="UTF-8"> <title>Próba</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> <body> <header><div><span>Próba</span></div></header> <div class="main_page"> <div id="menus"> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>1</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>2</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>3</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>4</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>5</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>6</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>7</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>8</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>9</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>10</p></div></div></div> </div> </div> <footer>Lábléc</footer> </body> </html>
CSS3 kód:

@charset "utf-8"; /* CSS Document */ html { margin: 0; height: 100%; } body { margin: 0; padding: 0; min-width: 600px; height: 100%; } header { position: relative; width: 100%; height: 100px; background-color: burlywood; } header > img { height: 100%; width: auto; } header > div { height: 100%; width: calc(100% - 348px); float: right; text-align: center; } header > div > span { display: inline-flex; height: 100%; font-size: 2.5em; font-weight: bolder; align-items: center; } footer { background-color: blue; height: 100px; width: 100%; float: left; text-align: center; font-size: 2.5em; font-weight: bolder; } .main_page { width: 100%; min-height: calc(100% - 100px - 100px); float: left; box-sizing: border-box; padding: 10px; } #menus { display: grid; margin: 0 auto; grid-gap: 0.5rem; width: calc(100% - 20px); padding: 10px; float: left; } @media (min-width: 300px) { #menus { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 800px) { #menus { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { #menus { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1500px) { #menus { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1700px) { #menus { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1900px) { #menus { grid-template-columns: repeat(7, 1fr); } } .menu { height: 170px; text-align: center; font-weight: bolder; box-sizing: border-box; cursor: pointer; } .item { display: block; margin-left: auto; margin-right: auto; margin-top: 2%; position: relative; box-sizing: border-box; border-radius: 20px; width: 90%; height: 90%; transition: width 0.3s, height 0.3s; } .item:hover { width: 98%; height: 98%; } .item > p { margin-top: 0; } .item > div > p { margin-top: 0; } .item > .back { position:absolute; width: 100%; height: 100%; background-color: orangered; box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5); box-sizing: border-box; border-radius: 20px; backface-visibility: hidden; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); -webkit-transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .item > .front { position:absolute; width: 100%; height: 100%; box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5); background-color: rgba(184,177,177,1.00); box-sizing: border-box; border-radius: 20px; backface-visibility: hidden; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); -webkit-transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .item:active > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .item:active > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }
Előre is köszönöm a segítséget!

Z.
Mutasd a teljes hozzászólást!
Mégis lehet JS nélkül

ha a checkbox-ot átírod radio-ra és adsz neki egy name-t akkor mindig csak 1 fordul meg.

css

.menu input[type="checkbox"]{ display:none; } .menu input[type="checkbox"]:checked +.item > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .menu input[type="checkbox"]:checked +.item > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }

html

<div class="main_page"> <div id="menus"> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>1</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>2</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>3</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>4</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>5</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>6</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>7</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>8</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>9</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>10</p></div></div></label> </div> </div>
Mutasd a teljes hozzászólást!

  • JS nélkül nem megy.

    Javascript-et tettem bele

    <script> document.querySelectorAll(".item").forEach(function(i){ i.addEventListener("click",function(){ if(!this.classList.contains("active")){ this.classList.add("active"); }else{ this.classList.remove("active"); } },false); }); </script>
    css-t módosítottam

    .item.active > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .item.active > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }


    HTML kód:

    <!DOCTYPE html> <html lang="hu"> <meta charset="UTF-8"> <title>Próba</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /> <body> <header><div><span>Próba</span></div></header> <div class="main_page"> <div id="menus"> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>1</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>2</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>3</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>4</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>5</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>6</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>7</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>8</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>9</p></div></div></div> <div class="menu "><div class="item"><div class="back"></div><div class="front"><p>10</p></div></div></div> </div> </div> <footer>Lábléc</footer> <script> document.querySelectorAll(".item").forEach(function(i){ i.addEventListener("click",function(){ if(!this.classList.contains("active")){ this.classList.add("active"); }else{ this.classList.remove("active"); } },false); }); </script> </body> </html>

    CSS3 kód:

    @charset "utf-8"; /* CSS Document */ html { margin: 0; height: 100%; } body { margin: 0; padding: 0; min-width: 600px; height: 100%; } header { position: relative; width: 100%; height: 100px; background-color: burlywood; } header > img { height: 100%; width: auto; } header > div { height: 100%; width: calc(100% - 348px); float: right; text-align: center; } header > div > span { display: inline-flex; height: 100%; font-size: 2.5em; font-weight: bolder; align-items: center; } footer { background-color: blue; height: 100px; width: 100%; float: left; text-align: center; font-size: 2.5em; font-weight: bolder; } .main_page { width: 100%; min-height: calc(100% - 100px - 100px); float: left; box-sizing: border-box; padding: 10px; } #menus { display: grid; margin: 0 auto; grid-gap: 0.5rem; width: calc(100% - 20px); padding: 10px; float: left; } @media (min-width: 300px) { #menus { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 800px) { #menus { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { #menus { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1500px) { #menus { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1700px) { #menus { grid-template-columns: repeat(6, 1fr); } } @media (min-width: 1900px) { #menus { grid-template-columns: repeat(7, 1fr); } } .menu { height: 170px; text-align: center; font-weight: bolder; box-sizing: border-box; cursor: pointer; } .item { display: block; margin-left: auto; margin-right: auto; margin-top: 2%; position: relative; box-sizing: border-box; border-radius: 20px; width: 90%; height: 90%; transition: width 0.3s, height 0.3s; } .item:hover { width: 98%; height: 98%; } .item > p { margin-top: 0; } .item > div > p { margin-top: 0; } .item > .back { position:absolute; width: 100%; height: 100%; background-color: orangered; box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5); box-sizing: border-box; border-radius: 20px; backface-visibility: hidden; -webkit-transform: perspective( 600px ) rotateY( 180deg ); transform: perspective( 600px ) rotateY( 180deg ); -webkit-transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .item > .front { position:absolute; width: 100%; height: 100%; box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.5); background-color: rgba(184,177,177,1.00); box-sizing: border-box; border-radius: 20px; backface-visibility: hidden; -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); -webkit-transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; } .item.active > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .item.active > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }
    Mutasd a teljes hozzászólást!
  • Mégis lehet JS nélkül

    ha a checkbox-ot átírod radio-ra és adsz neki egy name-t akkor mindig csak 1 fordul meg.

    css

    .menu input[type="checkbox"]{ display:none; } .menu input[type="checkbox"]:checked +.item > .front { -webkit-transform: perspective( 600px ) rotateY( -180deg ); transform: perspective( 600px ) rotateY( -180deg ); } .menu input[type="checkbox"]:checked +.item > .back { -webkit-transform: perspective( 600px ) rotateY( 0deg ); transform: perspective( 600px ) rotateY( 0deg ); }

    html

    <div class="main_page"> <div id="menus"> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>1</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>2</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>3</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>4</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>5</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>6</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>7</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>8</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>9</p></div></div></label> <label class="menu"><input type="checkbox"><div class="item"><div class="back"></div><div class="front"><p>10</p></div></div></label> </div> </div>
    Mutasd a teljes hozzászólást!
  • Szia

    MIndkét megoldásod jó, de a második jobban tetszik!
    Egyébként pont azt szeretném kipróbálni, hogy milyen animációkat lehet csinálni csak css3-al.
    Még így is egy csomó lehetőséget nem ismerek benne.

    Köszi szépen a segítséget!
    Megyek gyakorolni :)


    Üdv:
    Z.
    Mutasd a teljes hozzászólást!
  • Css-el is elég sok mindent meg lehet csinálni.

    Én is többnyire ha lehetséges akkor nem használok js-t.
    Mutasd a teljes hozzászólást!
  • Igen, én is erre próbálok törekedni :)
    De animációk terén még elég gyenge vagyok.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd