Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Width-height-i-depth

Width, height и depth?

Эта статья будет отличаться от других. Но что если в будущем будет именно так? А чём это я? Может кто-то скажет что это бред сумасшедшего да и только. Про высоту (height) и ширину (width) я уже писал в учебнике по CSS, а про глубину (depth) ни слово.

Глубина в CSS3Вы скажете, что такого свойства нет и окажетесь правы. В CSS3 как вы наверное убедились сами, мы можем строить 3D фигуры, можем добавлять тени, градиенты, также изменять перспективу вида самого объекта. Так вот к чему я всё это виду. Вроде мы с вами можем создавать визуально глубину объекта, но давайте с вами немного пофантазируем и добавим ещё одно свойство — depth.

Я придумал его сам не обессудьте, давайте рассмотрим вот такой код HTML:

<section class="container">
 <div class="cube">
 <span class="side front">1</span>
 <span class="side back">2</span>
 <span class="side top">3</span>
 <span class="side bottom">4</span>
 <span class="side left">5</span>
 <span class="side right">6</span> 
 </div>
</section>

И такой код CSS:

 .container {       
  perspective: 700px;
  perspective-origin: 10% 60%;
       }
 .cube{
  position: relative;
  margin: 150px auto;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  transition: all 1.3s ease;
 }
.side{
 display: block;
  position: absolute;
  background:#cccccc;
  opacity:0.6;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  color: #000;
  font-size: 20px;
  text-align: center;
  line-height: 150px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}
.front {
  transform: translateZ(75px);
}
.back {
  transform: translateZ(-75px) rotateY(-180deg);
}
.left {
  transform: translateX(-75px) rotateY(-90deg);
}
.right {
  transform: translateX(75px) rotateY(90deg);
}
.top {
  transform: translateY(-75px) rotateX(90deg);
}
.bottom {
  transform: translateY(75px) rotateX(-90deg);
}

А теперь я бы применил моё воображаемое свойство depth и написал бы вот такой код CSS:

.cube{
  position: relative;
  margin: 150px auto;
  width: 150px;
  height: 150px;
  depth: 150px; /* Задаём глубину блока */
  background:#cccccc;
  color: #000;  
  transform-style: preserve-3d;  
 }

И всё! По умолчанию значения свойства transform, а именно rotate стоит такое же, как в предыдущем примере, а значение translate описывать не надо так, как мы уже прописали глубину. Другой вопрос, как реализовать например другие значения для определенной стороны, нет ничего проще с помощью псевдо-классов: ::depth-left, ::depth-right, ::depth-front, ::depth-back , ::depth-top, ::depth-bottom:

.cube::depth-left{
background:#000000;
color: #ffffff; 
}

Остается вопрос как реализовать это всё в коде html? Давайте попробуем так:

 <section class="container">
 <div class="cube">
     <depth-front>1</depth-front>
     <depth-back>2</depth-back>
     <depth-top>3</depth-top>
     <depth-bottom>4</depth-bottom>
     <depth-left>5</depth-left>
     <depth-right>6</depth-right> 
 </div>
</section>

Тут я тоже немного намудрил и сделал так, чтобы псевдоклассы превратились в дочерние теги от родительского блока с родительским классом.


Как я говорил вначале к сожалению о том, что писал выше это всё лишь полёт моей фантазии. К сожалению, а может быть и к счастью я не разработчик CSS. Если когда-нибудь и появится свойство глубины, то скорее всего автором будет другой человек. Но как говориться мечтать, не вредно!




наверх