Показать сообщение отдельно
  #1 (permalink)  
Старый 23.01.2014, 12:06
Интересующийся
Отправить личное сообщение для FirstRelict Посмотреть профиль Найти все сообщения от FirstRelict
 
Регистрация: 25.02.2013
Сообщений: 13

Трансформация элемента
Вот тут на сайте https://vimeo.com/player
Плеер в шестиграннике, и по клику он превращается в прямоугольник.
как реализовать такую штуку, скажите пожалуйста в каком направлении читать(двигаться)??

Нашел как делать ромб на css
<html>
<head>
<style type="text/css">
#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}
</style>
</head>

<body>
<div id="hexagon"></div>
</body>
</html>

думал как то менять параметры, и что то выйдет из этого...увы пока ничего.
Ответить с цитированием