Используйте перспективу CSS3 и трансформируйте, чтобы визуализировать изображение как 3d-куб

Question

Используйте перспективу CSS3 и трансформируйте, чтобы визуализировать изображение как 3d-куб

Я использую PHP и ImageMagick для создания трехмерного предварительного просмотра печати на холсте (см. Изображение ниже).

Существуют варианты изменения типа кромки, глубины, размера и т. Д., Которые являются вызовами AJAX для файла поддержки PHP, который повторно отображает предварительный просмотр с новыми настройками, и я перезагружаю его в DOM.

Это начинает перегружать наш сервер, когда он занят. Поэтому я подумал, что смогу сделать это в CSS3 и вместо этого выполнить весь предварительный рендеринг на стороне клиента.

Вот что у меня так далеко:

<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>

.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}

.inner {
transform: rotateY(40deg);
}

.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}

.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}

У меня проблема с оборачиванием изображения по краям, как на картинке выше. Как я могу это сделать?

1

css-transforms css3 html5 imagemagick php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Я сделал демо с двумя элементами, держащими одно и то же изображение.

Просто установите источник изображения на них в соответствии с размером, и он будет соответствовать.

.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}

.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}

<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>

0

Другие решения

Других решений пока нет …

Источник