Elementtien Kääntäminen Dynaamisten Efektien Luomiseksi

translate() ja translateZ() mahdollistavat elementin siirtämisen alkuperäisestä sijainnistaan tiettyyn suuntaan suhteessa nykyiseen sijaintiin. Nämä funktiot ovat osa CSS:n transform-ominaisuutta. Lisäksi voidaan käyttää translateX()- ja translateY()-funktioita siirtämään elementtiä vain vaakasuunnassa tai pystysuunnassa.

transform: translate(X_value, Y_value, Z_value);
transform: translateX(value);
transform: translateY(value);
transform: translateZ(value);

• translate() – hyväksyy enintään 3 arvoa;
  • X_value on siirto x-akselilla. Positiivinen arvo siirtää elementtiä oikealle, negatiivinen vasemmalle;
  • Y_value on siirto y-akselilla. Positiivinen arvo siirtää elementtiä alas, negatiivinen ylös;
  • Z_value on siirto z-akselilla. Positiivinen arvo tuo elementtiä lähemmäs katsojaa, negatiivinen vie sitä kauemmas. Jos määrität vain 1 tai 2 arvoa, selain käyttää samoja arvoja puuttuville akseleille.
• translateX() ja translateY() – hyväksyvät kumpikin yhden arvon;
  • translateX(value) määrittää vaakasuoran siirron. Positiivinen arvo siirtää elementtiä oikealle, negatiivinen vasemmalle;
  • translateY(value) määrittää pystysuoran siirron. Positiivinen arvo siirtää elementtiä alas, negatiivinen ylös.
• translateZ() – hyväksyy yhden arvon. Määrittää siirron z-akselilla, mikä mahdollistaa 3D-muunnokset. Positiivinen arvo tuo elementtiä lähemmäs katsojaa, negatiivinen vie sitä kauemmas.

Tarkastellaan, mitä näillä funktioilla voidaan saavuttaa:

translate3d()-ominaisuus

Voimme myös lisätä 3D-elementin siirtymän yhden ominaisuuden avulla. Yleisesti käyttäjillä on kuitenkin 2D-näytöt, jolloin tämä 3D-liike ei ole näkyvissä. Samaan aikaan yhä useammat käyttäjät pyrkivät kokemaan 3D-todellisuutta. Pian useimmilla käyttäjillä onkin kolmiulotteiset näytöt, jolloin tämä ominaisuus on hyödyllinen. Syntaksi on seuraava:

transform: translate3d(X_value, Y_value, Z-value);

Lisäämme z-akselin siirtymän viimeisenä arvona. Positiivinen arvo liikuttaa elementtiä käyttäjää kohti. Negatiivinen arvo liikuttaa elementtiä käyttäjästä poispäin.

Tarkastellaan esimerkkiä:

Sinulla on todennäköisesti 2D-näyttö kuten minullakin, emmekä voi havaita siirtymää z-akselin suuntaan.