NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
IT rekvalifikace s podporou uplatnění. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!

Diskuze: transform - lze nastavit osu otáčení?

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 15:38

Zdravím,

mám ovál, který chci v css animovat tak, aby se otáčel kolem své osy, jenže tu osu nechci ve středu, ale na kraji toho oválu, můžete mi někdo poradit, jestli je to možné v css nastavit?

Používám na to vlastnost transform: rotate.

Předem dík.

 
Odpovědět
26.8.2013 15:38
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na teneritas
David Hartinger:26.8.2013 15:39

Tak si dej ten ovál do divu a otáčej ten div :P

Nahoru Odpovědět
26.8.2013 15:39
New kid back on the block with a R.I.P
Avatar
teneritas
Člen
Avatar
Odpovídá na David Hartinger
teneritas:26.8.2013 15:41

mám ho v divu, ovál je nadefinovaný div v css.

 
Nahoru Odpovědět
26.8.2013 15:41
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na teneritas
Honza Bittner:26.8.2013 15:46 
<div id="otaceni">
  <div id="oval">
  </div>
</div>

pak si to vhodně nastavíš a mělo by to fungovat

Editováno 26.8.2013 15:47
Nahoru Odpovědět
26.8.2013 15:46
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:26.8.2013 15:48

Nedá se nastavit nějak střed otáčení? já mám pocit že to šlo ...

Nahoru Odpovědět
26.8.2013 15:48
Neaktivní uživatelský účet
Avatar
David Hartinger
Vlastník
Avatar
David Hartinger:26.8.2013 15:58

Transform-origin.

Nahoru Odpovědět
26.8.2013 15:58
New kid back on the block with a R.I.P
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 16:02

Div v divu se vážně otáčí jinak:)Ale teď se to spíš posunuje jakoby nahoru a dolu (neotáčím to celé), ale i tak by to mohlo vypadat líp, díky. Pro představu dělám králíka, který má stříhat ušima a spodek ucha by chtělo mít stále na jednom místě.

 
Nahoru Odpovědět
26.8.2013 16:02
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 16:06

Aha, a mám k transform origin dát nějakou speciální hodnotu? Nebo stačí dát transform-origin: rotate(12deg); Jak ale pozná, kolem čeho to chci otáčet?

 
Nahoru Odpovědět
26.8.2013 16:06
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na teneritas
Neaktivní uživatel:26.8.2013 16:06

tak to ten obalovací div bude dvakrát větší než ucho, a ucho bude v horní polovině, tudíž ten konec ucha bude přesně na středu a mělo by se to otáčet jak chceš :)

// DODATEK: transform origin už nevím jak funguje, to si budeš muset dohledat nebo poradí někdo jiný

Editováno 26.8.2013 16:07
Nahoru Odpovědět
26.8.2013 16:06
Neaktivní uživatelský účet
Avatar
teneritas
Člen
Avatar
Odpovídá na Neaktivní uživatel
teneritas:26.8.2013 16:08

Tak to bude ono,dík za nápad!

 
Nahoru Odpovědět
26.8.2013 16:08
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 16:11

K transform origin jsem něco našla tady: http://www.w3schools.com/…m-origin.asp
Tak už je mi to jasnější, jdu to prozkoumat.

 
Nahoru Odpovědět
26.8.2013 16:11
Avatar
teneritas
Člen
Avatar
Odpovídá na David Hartinger
teneritas:26.8.2013 16:13

Díky za nápovědu, prozkoumám.

 
Nahoru Odpovědět
26.8.2013 16:13
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na teneritas
Neaktivní uživatel:26.8.2013 16:15

Jo, tak už je mi to jasné:

transform-origin: 50% 100%;

otáčení doděláš v animaci, tohle by mělo udělat střed na spodní hraně uprostřed

// EDIT: nezapomeň na vendor prefixy!

Editováno 26.8.2013 16:17
Nahoru Odpovědět
26.8.2013 16:15
Neaktivní uživatelský účet
Avatar
teneritas
Člen
Avatar
Odpovídá na Neaktivní uživatel
teneritas:26.8.2013 16:22

Nezapomenu, dík :))

 
Nahoru Odpovědět
26.8.2013 16:22
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Neaktivní uživatel:26.8.2013 16:46

Já měl trošku problém to pochopit, tak jsem to sobě i ostatním znázornil - asi špatnej den, prostě mi to chvilku trvalo, než mi došlo jak to funguje :D

transform-origin: x y;

/* Default */
transform-origin: 50% 50%;

/* Levý horní roh */
transform-origin: 0% 0%;

/* Králiččí ucho */
transform-origin: 50% 100%;
Nahoru Odpovědět
26.8.2013 16:46
Neaktivní uživatelský účet
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 15 zpráv z 15.