TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

CSS Horizontal Flip Image Widget

2

CSS -tyylitaulukoita tai CSS: ää voidaan käyttää helposti lisäämään houkuttelevia tehosteita sivustosi kuviin. Joskus saatat ihmetellä, miten kuvan kääntö tehdään tekstinäytön kanssa. Tässä on yksinkertainen widget -koodi tällaisen tehosteen luomiseksi HTML: n ja CSS: n avulla.

  • Luo kuvatehoste vaakasuunnassa käännettävällä tyylillä.
  • Näytä kuva, joka kääntyy vaakasuoraan, kun hiirtä siirretään.
  • Tekstiviesti näytetään, kun hiiri on päällä.
  • Kuva kääntyy takaisin, kun hiiri otetaan ulos.

Koodi vaakasuuntaisen käännettävän kuvan luomiseksi tekstinäytöllä

Tällaisen vaakasuuntaisen käännettävän kuvawidgetin luomiseen on kaksi osaa.

  • HTML – Tämä koodi lisätään verkkosivullesi, jossa haluat näyttää kuvan.
  • CSS – Tämä koodi lisätään CSS: ään. On suositeltavaa lisätä tämä koodi ulkoiseen tyylitaulukkoon sivun latausnopeuden pienentämiseksi. Voit myös lisätä tämän yhdessä sivun sisäisen HTML -koodin kanssa, mikä tarkoittaa vain kopioimista ja liittämistä koodilla yhdessä sivun HTML -koodin kanssa.

Tässä on HTML -koodi, jonka avulla voit korvata oman kohde -URL -osoitteen, kuvan ja näytettävän tekstin.

<div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <a href=https://www.webnots.com/step-by-step-seo-tutorial/search-engine-optimization-guide/><Img data-src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88474-613212da8701a.png"> </div> <div class="backside"><br> <p align=justify> <font face=arial size=5 color=brown>Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...</font> </p></a> </div> </div> </div>

Tässä on CSS -koodi, voit muokata kuvan kokoa, kiertokulmaa ja taustaväriä tarpeidesi mukaan:

<style type="text/css"> /* Start: Suport for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* End: Support for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip, .frontside, .backside { width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); background: grey; z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } </style>

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja