Obracanie obiektów - cSS

Question

witam, mam pewne pytanie.
otóż mam tak zbudowany html

 

<div class="klasa1">
  <p>Jakis tekst</p>
</div>

i teraz tak za pomocą transform robie sobie lsutrzane odbicie dla klasa1
                transform: scaleY(-1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg)
jednakże otrzymuje także efekt nie porządany w postaci obróconego tekstu
zaradziłem temu dodając taki sam transform do elementu <p>

Pytanie moej brzmi czy jest jakis inny, prostszy sposób aby zrobić to samo?

Answer 1

Najlepiej stworzyć nową klasę. Nie do końca rozumiem co chcesz osiągnąć tym zabiegiem. Domyślam się, że chodzi o coś w rodzaju paginacji na zasadzie <Previous Next> gdzie < i > to np. divy o klasie klasa1, które w tle mają jakąś strzałkę. Jeżeli możesz to opisz dokładniej problem.

Comments

Nie, po prostu w ramach ćwiczeń koduje sobie layout, który ma na stronie dwa boxy wykonane w photoshopie.
Różniasię tylko tym że są inaczej obrócone dlatego zamiast wycinać kolejnego borazka i dodawać go jako nowy zrobiłem sobie klase dla tego boxa i obróciłem go tak aby otrzymac taki sam efekt jak w photoshopie.

---

Hmmm, a gdybyś w css wrzucił sobie .klasa1:nth-of-type(2) i odbił jedynie tło?

Tu jest przykład podobnego zabiegu: https://www.sitepoint.com/css3-transform-background-image/

---

hmm ale ja wiem jak obracać elementy, chciałbym jedynie zrobić tak aby nie obracała sie cała zawartosć

---

Dlatego napisałem o obracaniu jedynie tła, a nie całego diva. W linku pod nagłówkiem "Transforming the background only" masz podany przykład jak można to zrobić.

---

Sposób jest dobry lecz ma kilka wad, tak czy inaczej bardzo dziekuje za odpowiedź i Twój czas.

Answer 2

Zamiast bezpośrednio do znacznika p możesz posłużyć się selektorem dziecka (nie zawsze musi to być akurat znacznik p wewnątrz transformowanego diva):

.klasa1, .klasa1 > * {
  transform: scaleY(-1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
}