Hi Dee,
du machst dir das glaube ich zu kompliziert. Lass doch einfach die Artikel rotieren und den Inhalt dann wieder entgegengesetzt rotieren, damit er wieder Horizontal steht. Dem Artikel gibtst du ein overflow:hidden, dann steht auch nichts über. Für die entgegengesetzte Rotation kannst du auch ein neues DIV in das Artikel-Template einfügen, da glaub ich nicht alle Inhaltselemente ein .block haben. Und wenn ein Browser transform nicht unterstützt, wird es ganz normal dargestellt, ohne irgendwelche CSS Verenkungen. Beispiel: https://jsfiddle.net/c9h40wbo/
HTML-Code:
<html>
<head>
<style>
body {
background:blue;
}
.mod_article {
margin:0 -500px;
transform: rotate(-2deg);
padding:100px 500px;
overflow:hidden;
}
.block {
margin:0 auto;
max-width:960px;
color:#FFF;
transform: rotate(2deg);
}
</style>
</head>
<body>
<div class="mod_article" style="background:blue;">
<div class="block">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
<div class="mod_article" style="background:red;">
<div class="block">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
<div class="mod_article" style="background:green;">
<div class="block">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>
</body>
</html>
Lesezeichen