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_valueon siirto x-akselilla. Positiivinen arvo siirtää elementtiä oikealle, negatiivinen vasemmalle;Y_valueon siirto y-akselilla. Positiivinen arvo siirtää elementtiä alas, negatiivinen ylös;Z_valueon 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()jatranslateY()– 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:
index.html
index.css
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ä:
index.html
index.css
Sinulla on todennäköisesti 2D-näyttö kuten minullakin, emmekä voi havaita siirtymää z-akselin suuntaan.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you show an example of how translate3d() works in CSS?
What are some practical uses for translateZ() or translate3d() today?
How does translate3d() differ from using translate() with three values?
Awesome!
Completion rate improved to 2.04Elementtien Kääntäminen Dynaamisten Efektien Luomiseksi
Pyyhkäise näyttääksesi valikon
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_valueon siirto x-akselilla. Positiivinen arvo siirtää elementtiä oikealle, negatiivinen vasemmalle;Y_valueon siirto y-akselilla. Positiivinen arvo siirtää elementtiä alas, negatiivinen ylös;Z_valueon 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()jatranslateY()– 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:
index.html
index.css
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ä:
index.html
index.css
Sinulla on todennäköisesti 2D-näyttö kuten minullakin, emmekä voi havaita siirtymää z-akselin suuntaan.
Kiitos palautteestasi!
