Како да креирате 3Д анимације помоћу дугмади са ЦСС-ом

један на другом, два за предње и задње стране дугмета, и трећи за пуњење дубине у средини. Ставимо лица са три тастера у .флипБтн контејнер који ће функционисати као 3Д тастер, а ми стављамо 3Д дугме у .флипБтнВраппер враппер.

2. Додавање основних стилова ЦСС-ом

Поставили смо видтх и хеигхт својства омотача, дугмета и дугмета, и позиционирају их помоћу технике релативног / апсолутног позиционирања.

 .флипБтнВраппер ширина: 200пк; хеигхт: 200пк; позиција: релативна;  .флипБтн, .флипБтн_фаце видтх: 100%; висина: 100%; позиција: апсолутна;  

3. Формирајте лица са 3 дугмета

Ми додајемо слике позадине на предња и задња лица дугмета, и постављамо цоол линеарни градијент иза слика за оба. Трик је у томе што у ЦСС-у можете поставити више слика као позадинску слику за исти елемент, а градијенте можете декларисати и као позадинске слике..

Средње лице, .флипБтн_мид, је дат а хеигхт од 20пк, и исти простор од 20пк се креира између предње и задње стране. Ово постижемо помоћу транслатеЗ () ЦСС функција помера елемент дуж з-осе. Гурамо задњу страну за 10пк, а предњу страну померимо за 10пк.

 .флипБтн_фронт бацкгроунд-имаге: урл ("имаге / цсс-3д-флип-буттон-аниматион-плаи.пнг"), линеарно-градијент (# ФФ6366 50%, # ФЕА56Е); бацкфаце-висибилити: хидден; трансформ: транслатеЗ (10пк);  .флипБтн_бацк бацкгроунд-имаге: урл ("имаге / цсс-3д-флип-буттон-аниматион-паусе.пнг"), линеарно-градијент (# ФФ6366 50%, # ФЕА56Е); боја позадине: плава; трансформ: транслатеЗ (-10пк);  .флипБтн_мид хеигхт: 20пк; бацкгроунд-цолор: # д5485а; трансформ: ротатеКс (90дег); топ: -10пк; 

До покрити простор између предње и задње стране са средњом, ми положи средњу страну равна преко к-равни 3Д простора користећи трансформ: ротатеКс (90дег); правило то чини је окомитим на предња и задња лица на и-равни.

Пошто је средња страна положена равно преко к-равни, њена горња тачка на и-оси иде 10 пк (половина њене висине) од оригиналне. Дакле, да га повучете и поравнајте врх са два друга лица, додао сам горе: -10пк правило.

Користио сам позадина-видљивост ЦСС својство за предњу страну, тако да када окренемо дугме, задњи део предње стране неће бити видљив.

До сада ћете видети само предње лице на екрану, пошто је к-равни скривен од погледа, а на и-равни (екран) задње лице које је положено је предња страна. Окретањем дугмета моћи ћете да видите и друга лица.

4. Ротирање дугмета

Својство ЦСС-а у стилу трансформације одређује да ли су подређени елементи ХТМЛ елемента приказани равни или позиционирани у 3Д простору. У исјечку кода испод, трансформ-стиле: пресерве-3д; Правило даје 3Д волумен нашем дугмету, док је трансформ: ротатекКс () својство ротира око оси к.

 .флипБтн трансформ-стиле: пресерве-3д; трансформ: ротатеКс (-120дег);  

Приметио сам да сам користио -120дег искључиво у демонстративне сврхе, јер је на овај начин лакше илустровати како ротација дугмета функционише.

Међутим, у следећем кораку ћемо га променити -180дег да се тастер потпуно окрене.

5. Анимирање дугмета

У овом тренутку, наш 3Д тастер још увек није анимиран. То можемо учинити помоћу прелаз својство. Ми користимо трансформисати својство за прву вриједност, јер је то својство за које желимо примијенити ефект пријелаза. Друга вредност је трајање, 2с.

Направимо да се дугме ротира само на лебдењу, па уместо на .флипБтн селектор, хајде да употребимо .флипБтнВраппер: ховер .флипБтн. Као што је раније поменуто, такође промените вредност ротатеКс () до -180дег да окренете дугме.

 .флипБтн транситион: трансформ 2с; трансформ-стиле: пресерве-3д;  .флипБтнВраппер: ховер .флипБтн трансформ: ротатеКс (-180дег); 

Имајте на уму да у Гитхуб репо, ја је додао потврдни оквир за свако дугме да би активирали анимацију : цхецкед радије него на :лебдети, на тај начин се понаша више као право дугме. Такође сам укључио четири различита дугмета са четири правца окретања (Топ → Боттом, Боттом → Топ, Ригхт → Лефт и Лефт → Ригхт), тако да можете лако користити оно што желите.

• Виев Демо
• Довнлоад Соурце