Rotate Text auf th Y-Achse

In den letzten Tagen habe ich mit der CSS rumgespielt Property verwandeln ein bisschen und ich möchte einen Weg für Perspektiven finden, wie folgt aus:Rotate Text auf th Y-Achse

Mit den Boxen alle normale rechteckige Schachteln sein. Ich habe keine Ahnung, wo ich anfangen soll.

Wie gewünscht:

body { 
 
    margin: 0px; 
 
    margin-left: 15%; 
 
    overflow: hidden; 
 
} 
 
.skewed { 
 
    margin: -1px; 
 
    height: 300px; 
 
    border: 4px solid black; 
 
    width: 70%; 
 
    float: left; 
 
    overflow: hidden; 
 
    transform: perspective(200px) rotateY(45deg); 
 
} 
 
.skewed > img { 
 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") blur(3px); 
 
    filter: gray; 
 
    /* IE6-9 */ 
 
    -webkit-filter: grayscale(100%) blur(3px); 
 
    /* Chrome 19+ & Safari 6+ */ 
 
    transition: 0.2s ease-in-out; 
 
} 
 
.skewed:hover > img { 
 
    transform: scale(1.05); 
 
    filter: none; 
 
    -webkit-filter: grayscale(0%); 
 
}

<div class="skewed"> 
 
    <img src="image001.jpg"> 
 
</div> 
 
<div class="skewed"> 
 
    <img src="image002.jpg"> 
 
</div> 
 
<div class="skewed"> 
 
    <img src="image003.jpg"> 
 
</div> 
 
<div class="skewed"> 
 
    <img src="image004.jpg"> 
 
</div>

Quelle

2016-10-05 TheLexoPlexx

Bitte fügen Sie, was Sie versucht haben ... zumindest die HTML-und Basic CSS für diese Boxen. – DaniP

Diese Boxen sind mit GIMP zusammengebaut, ich habe so ziemlich alle Transformationseigenschaften ausprobiert, aber keiner hat mich zu diesem Ergebnis geführt, auch nicht so, wie gesagt, ich habe keine Ahnung wo ich anfangen soll. – TheLexoPlexx

Beginnen Sie mit einem grundlegenden HTML und CSS, um diese Boxen zu machen. – DaniP

Es mit CSS 3d transforms ziemlich einfach ist. Sie können mit transform:rotateY(xdeg);

hier jedes Element auf der Y-Achse drehen ist ein Beispiel:

div { 
 
    font-size: 2em; 
 
    width: 7em; 
 
    margin: 0 auto; 
 
    padding: 0.1em 0; 
 
    text-align: center; 
 
    transform: perspective(500px) rotateY(30deg); 
 
    background: teal; 
 
} 
 
div:nth-child(2n) { 
 
    transform: perspective(500px) rotateY(-30deg); 
 
    background: tomato; 
 
}

<div>some text</div> 
 
<div>some text</div> 
 
<div>some text</div> 
 
<div>some text</div>

Beachten Sie, dass Sie benötigen, um Anbieter Präfixe für Browser-Unterstützung hinzuzufügen. Siehe canIuse für weitere Informationen

Quelle

2016-10-05 15:46:06

Rotate Text auf th Y-Achse

Antwort

Verwandte Themen