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>