CSS Horizontal Flip Image Widget

Viimeisin päivitys marras 13, 2021

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>

: webnots.com