F
Furtano
Gast
Rotierte Schrift (CSS) auf einer Linie verschieben
Hallo,
ich möchte eine rotierte Schrift (z.B.) auf der X-Achse verschieben, sodass eine Linie entsteht.
Ich weiß nicht wie ich das mit CSS lösen soll, deswegen habe ich die Punkte mit einer Drehmatrix ausgerechnet.
Allerdings ist es im Browser nicht auf einer Linie, wenn ich nur die X-Achse verschiebe.
http://christian-schade.eu/simon/5/drehung.php
Fiddle: http://jsfiddle.net/Furtano/3vjqcupk/
Meint ihr, es ist ein CSS-Fehler?
Danke!
Hallo,
ich möchte eine rotierte Schrift (z.B.) auf der X-Achse verschieben, sodass eine Linie entsteht.
Ich weiß nicht wie ich das mit CSS lösen soll, deswegen habe ich die Punkte mit einer Drehmatrix ausgerechnet.
Allerdings ist es im Browser nicht auf einer Linie, wenn ich nur die X-Achse verschiebe.
http://christian-schade.eu/simon/5/drehung.php
Fiddle: http://jsfiddle.net/Furtano/3vjqcupk/
Meint ihr, es ist ein CSS-Fehler?
Danke!
PHP:
<?php
/**
* Created by PhpStorm.
* User: christian
* Date: 19.08.14
* Time: 09:39
*/
function drehung ($x, $y,$alpha, $deltaX, $deltaY, $name){
$ergebnis = array();
//$laenge = 1/sqrt(($x*$x)+($y*$y));
//$x = $x*$laenge;
//$y = $y*$laenge;
$tempX1 = (cos($alpha)*$x);
$tempY1 = (sin($alpha)*$x);
$tempX2 = (-sin($alpha)*$y);
$tempY2 = (cos($alpha)*$y);
$x = $tempX1+$tempX2;
$y = $tempY1+$tempY2;
$ergebnis[] = $x + $deltaX;
$ergebnis[] = $y + $deltaY;
$ergebnis[] = $alpha;
$ergebnis[] = $name;
return $ergebnis;
}
function makeCSStoTurn($erg){
print("." . $erg[3] . "{\n");
print("position: absolute ;\n");
print("transform-origin: 0% 0%;");
print("left: " . round($erg[0])) . "px;\n";
print("top: " . round($erg[1])) . "px;\n";
print("-moz-transform:rotate(" . $erg[2] . "deg);\n");
print("-webkit-transform:rotate(" . $erg[2] . "deg);\n");
print("-o-transform:rotate(" . $erg[2] . "deg);\n");
print("-ms-transform:rotate(" . $erg[2] . "deg);\n");
print("transform:rotate(" . $erg[2] . "deg);\n");
print("font-family: Arial;font-size: 20pt;");
print("}\n");
}
$erg = drehung(100,0,45,0,0, "rot");
$erg2 = drehung(200,0,45,0,0, "rot2");
//var_dump($erg);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
<?php
makeCSStoTurn($erg);
makeCSStoTurn($erg2);
?>
</style>
</head>
<body>
<span class="rot">Christian</span>
<span class="rot2">Markus</span>
</body>
</html>
Zuletzt bearbeitet von einem Moderator:
