CSS Challenge: Отзывчивые перспективные заборы с css - PullRequest
Новая
       27

CSS Challenge: Отзывчивые перспективные заборы с css

0 голосов
/ 08 февраля 2020

Мне нужна помощь в создании адаптивного забора в css (во вложении). Я стараюсь играть с точки зрения и трансформации, но безуспешно. Вы можете помочь мне. Спасибо:)

Один забор / изображение -> https://jakubtursky.sk/projekty/4-hranne.svg

Результат: введите описание изображения здесь

Вы можете отредактируйте это демо: 

body{
	padding: 50px 0;
}

.configurator-canvas{
	position: relative;
	height: 290px;
	width: 100%;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	// perspective: 600px;
}

.configurator-canvas-item{
	position: relative;
	// transform: rotateX(45deg);
}

.configurator-canvas-item-left{
	// position: absolute;
	// bottom: 0;
	// left: 0;
	// transform: skew(20deg);
	// transform: rotateX(45deg) rotateZ(40deg) rotateY(25deg);
}

.configurator-canvas-item-top{
}

.configurator-canvas-item-right{
}

.configurator-canvas-item-bottom{
}
<!DOCTYPE html>
<html lang="">
	<!-- Head -->
	<head>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap-grid.css">
	</head>
	<body class="overflow-x-hidden">
		<!-- svg group-->
		<!-- Main content -->
		<main class="bg-sm-gray-light">
			<!-- Section configurator-->
			<section class="padding-style-1-3">
				<div class="container-large">
					
					<div class="row gutter-lg-60 align-items-center">
						<div class="configurator-parameter-left-panel col-12 col-lg-5">
							
						</div>
						<div class="configurator-parameter-right-panel col-12 col-lg-7">
							<div class="configurator-canvas">
								<div class="configurator-canvas-item configurator-canvas-item-left">
									<img class="img-responsive configurator-canvas-img" src="https://jakubtursky.sk/projekty/4-hranne.svg" alt="">
									
								</div>
								<div class="configurator-canvas-item configurator-canvas-item-top">
									<img class="img-responsive configurator-canvas-img" src="https://jakubtursky.sk/projekty/4-hranne.svg" alt="">
									
								</div>
								<div class="configurator-canvas-item configurator-canvas-item-right">
									<img class="img-responsive configurator-canvas-img" src="https://jakubtursky.sk/projekty/4-hranne.svg" alt="">
									
								</div>
								<div class="configurator-canvas-item configurator-canvas-item-bottom">
									<img class="img-responsive configurator-canvas-img" src="https://jakubtursky.sk/projekty/4-hranne.svg" alt="">
									
								</div>
							</div>
						</div>
					</div>
					
				</div>
			</section>
			
		</main>
	</body>
</html>

Только lorem ipsum :) Lorem Ipsum - просто фиктивный текст в полиграфической и печатной индустрии. Лорем Ипсум был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный принтер взял набор шрифтов и скремблировал его, чтобы сделать книгу типовых образцов.

...