Повернуть текст на й оси Y

В последние несколько дней я играл вокруг с CSS преобразования собственности немного, и я хочу, чтобы найти способ для точек зрения, как это:Повернуть текст на й оси Y

С коробки все являющихся нормальными прямоугольными коробками. Я просто не знаю, с чего начать.

В соответствии с просьбой:

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>

источник

2016-10-05 TheLexoPlexx

Пожалуйста, укажите, что вы пробовали ... по крайней мере, html и basic css для этих ящиков. – DaniP

Эти коробки объединены с GIMP, я пробовал почти все свойства преобразования, но ни один не привел меня к этому результату, даже комбинации, поэтому, как указано, у меня нет идеи, с чего начать. – TheLexoPlexx

Начните с базового html и CSS, чтобы сделать эти поля. – DaniP

Это довольно просто с CSS 3d transforms. Вы можете вращать каждый элемент по оси Y с transform:rotateY(xdeg);

Вот пример:

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>

Обратите внимание, что вам нужно будет добавить префиксы для поддержки браузера. См. canIuse для получения дополнительной информации

источник

2016-10-05 15:46:06

Повернуть текст на й оси Y

ответ

Смежные вопросы