Får inte rotation på div att fungera

PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
kungmats



Medlem i: 5923 dagar
Från: Falun
Status: Offline



#742388
Inlägg Skrivet: 2018-11-14 22:09      Ämne: Får inte rotation på div att fungera Citera

Hej

Jag vill sätta några postitlappar på en sida och vill ha dom roterade i slumpvis vinkel för att göra sidan mer verklig.

Min kod fungerar och tittar jag på sidkällan när sidan har laddats så har lapparna olika rotation ( rotate(deg) ) men på skärmen får lapparna samma rotation.
Laddar jag om sidan blir det en annan rotation men alla lappar blir vridna lika.
Jag har t.o.m. satt olika class på divarna men ändå roteras dom lika.

Var tänker jag fel?
Tacksam för hjälp.


KOD:
1:
<?php
2:
 
3:
$poi = mysqli_query($wolf, "SELECT * FROM postit WHERE view='1' ")or die(mysqli_error($wolf));
4:
while($p = mysqli_fetch_array($poi))
5:
{
6:
  $i=1;
7:
  $deg = rand(-9, 9);
8:
?>
9:
<style>
10:
  .postit<?=$i?> {
11:
  background:#fefabc;
12:
  padding:15px;
13:
  font-size:15px;
14:
  color: #000;
15:
  width:170px;
16:
  min-height:170px;
17:
 
18:
  -moz-transform: rotate(<?=$deg?>deg);
19:
  -webkit-transform: rotate(<?=$deg?>deg);
20:
  -o-transform: rotate(<?=$deg?>deg);
21:
  -ms-transform: rotate(<?=$deg?>deg);
22:
  transform: rotate(<?=$deg?>deg);
23:
 
24:
  box-shadow: 0px 4px 6px #333;
25:
  -moz-box-shadow: 0px 4px 6px #333;
26:
  -webkit-box-shadow: 0px 4px 6px #333;
27:
}
28:
</style>
29:
 
30:
<div class="postit<?=$i?>">
31:
  <b><?=utf8_encode($p['h1'])?></b><br/>
32:
  <?=nl2br(utf8_encode($p['text']))?><br/>
33:
</div>
34:
 
35:
<?
36:
$i++;
37:
}
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
harald_b
Moderator



Medlem i: 4559 dagar
Från: Tavesta
Status: Offline



#742389
Inlägget är accepterad som det rätta svaret Skrivet: 2018-11-14 23:35      Ämne: Citera

Klassnamnen blir samma för alla divarna, eftersom du sätter $i till 1 i början av varje varv i loopen.
Sätt $i=1; före loopen istället.

Du vet att du kan sätta style för enstaka html-element genom att använda style-attributet istället? Då slipper du trassla med en hel massa olika klassnamn.
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
kungmats



Medlem i: 5923 dagar
Från: Falun
Status: Offline



#742390
Inlägg Skrivet: 2018-11-15 09:41      Ämne: Citera

Tack @harald_b! ... det borde jag har kommit på själv.
Jag tycker ändå att rotationen borde ha blivit olika när graderna visades olika i koden.

Jag förstod dock inte hur du menade att jag skulle göra med style="".
Jag var ju tvungen att göra så här (i min värld) för att få olika grader på divarna Smile

mvh Mats
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
harald_b
Moderator



Medlem i: 4559 dagar
Från: Tavesta
Status: Offline



#742391
Inlägg Skrivet: 2018-11-15 13:44      Ämne: Citera

KOD:
1:
<div style="transform: rotate(<?=$deg?>deg);"> ...

Det går bra att ha flera css-regler i style-attributet.
Du behöver bara ha de regler där som är olika i olika divar. De som är gemensama kan du även fortsättningsvis ha i den gemensamma css-koden.
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
kungmats



Medlem i: 5923 dagar
Från: Falun
Status: Offline



#742392
Inlägg Skrivet: 2018-11-15 15:43      Ämne: Citera

Tack ... du tänkte så Smile
I det här fallet är det dock så lite kod att det kvittar, men tack för tipset.
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget
PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic