» » Уроки по CSS/CSS3. Частина 18. Тривимірний куб на CSS3

Уроки по CSS/CSS3. Частина 18. Тривимірний куб на CSS3

У цьому відео я покажу як зробити тривимірний куб за допомогою CSS transform



CSS код:
body {
  background: url(http://subtlepatterns.com/patterns/light_noise_diagonal.png);
  font: 1em 'PT Sans',Tahoma,Arial;
}

#wrapper {
  -moz-perspective: 900px;
  margin: 80px;
}

#cube {
  position: relative;
  width: 300px;
  height: 300px;
  -moz-transform-origin: 50% 50% -150px;
  -moz-transform-style: preserve-3d;
}

.side {
  width: 300px;
  height: 300px;
  background: rgba(0,0,0,.3);
  background: -moz-radial-gradient(rgba(0,0,0,.1),rgba(0,0,0,.5));
  position: absolute;
  border: 10px solid #fff;
  border-radius: 10px;
  font-size: 5em;
  color: #fff;
  line-height: 300px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
  box-shadow: 0 0 6px rgba(0,0,0,.5);
  -moz-transform-origin: 50% 50% -150px;
}

#side2 {
  -moz-transform: rotateY(90deg);
}

#side3 {
  -moz-transform: rotateY(-90deg);
}
#side4 {
  -moz-transform: rotateX(90deg);
}
#side5 {
  -moz-transform: rotateX(-90deg);
}
#side6 {
  -moz-transform: rotateY(180deg);
}


HTML код:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS Cube Test</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div id="wrapper">
		<div id="cube">
			<div class="side" id="side1">1</div>
			<div class="side" id="side2">2</div>
			<div class="side" id="side3">3</div>
			<div class="side" id="side4">4</div>
			<div class="side" id="side5">5</div>
			<div class="side" id="side6">6</div>
		</div>
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		$(function(){
			$(document).mousemove(function(e){
				$('#cube').css({
					'-moz-transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
				});
			});
		});
	</script>
</body>
</html>



Текстові редактори для написання коду:
Aptana Studio 3 - використовує автор відео
Brackets
SubLime Text - рекомендує web.if.ua
Notepad++



css-lessons
1351 14.01.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру