6

Как сделать подобное на jQuery/JavaScript/CSS

Есть ромб, разделенный условно на четыре части и при наведении на него мышкой эти четыре части раскрываются в квадрат, т.е весь ромб превращается в квадрат, т.е типо как открытие конверта, только с четырех сторон. Внутри которого скрытый текст

ромб

2 ответа 2

7

Вот пример реализации на css.

Сейчас конверт открывается при наведении, но с помощью JavaScript (и минимум изменений в css) можно навесить обработчик, который будет открывать конверт при клике.

body {
  margin: 70px;
  background: #f7f7f7;
}
.envelope {
  position: relative;
  background: #082cde;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
}
.envelope:hover .part1,
.envelope:hover .part3 {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.envelope:hover .part2,
.envelope:hover .part4 {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.envelope:hover .part1 {
  border-bottom-color: #082cde;
}
.envelope:hover .part2 {
  border-left-color: #082cde;
}
.envelope:hover .part3 {
  border-top-color: #082cde;
}
.envelope:hover .part4 {
  border-right-color: #082cde;
}
.envelope:hover .envelope__cover {
  display: inline-block;
}
.envelope .envelope__cover {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  color: white;
  vertical-align: middle;
  line-height: normal;
  display: none;
}
.envelope .envelope__part {
  width: 0;
  height: 0;
  border: 40px solid transparent;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  position: absolute;
}
.envelope .part1 {
  border-bottom-color: #1d40ef;
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
}
.envelope .part2 {
  border-left-color: #1d40ef;
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
}
.envelope .part3 {
  border-top-color: #1d40ef;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}
.envelope .part4 {
  border-right-color: #1d40ef;
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
}
<div class="envelope">
  <div class="envelope__part part1"></div>
  <div class="envelope__part part2"></div>
  <div class="envelope__part part3"></div>
  <div class="envelope__part part4"></div>
  <div class="envelope__cover">Inner content</div>
</div>

Из интересного: каждая из четырех частей (которые открываются) являются простыми div, у который высота и ширина равны 0, но задан border c соответствующим цветом границы (например, для нижней грани - border-bottom-color), который позволяет отображать блок в виде треугольника.

введите сюда описание изображения

Для поворота на 180 градусов использовал transform: rotateX() и `transform: rotateY(), а чтобы поворот был относительно нужной грани (например, для нижнего треугольника, относительно его нижней стороны) - transform-origin.


Исходники SCSS:

$outerColor: #1d40ef;
$innerColor: #082cde;
$envelopeSizePx: 80;

body {
  margin: 70px;
}

.envelope {
  position: relative;
  background: $innerColor;
  width: $envelopeSizePx+px;
  height: $envelopeSizePx+px;
  text-align: center;
  line-height: $envelopeSizePx+px;

  &:hover {
    .part1, .part3 {
      transform: rotateX(-180deg);
    } 
    .part2, .part4 {
      transform: rotateY(-180deg);
    }
    .part1 {
      border-bottom-color: $innerColor;
    }
    .part2 {
      border-left-color: $innerColor;
    }
    .part3 {
      border-top-color: $innerColor;
    }
    .part4 {
      border-right-color: $innerColor;
    }
    .envelope__cover {
      display: inline-block;
    }
  }
  .envelope__cover {
    color: white;   
    vertical-align: middle;
    line-height: normal;
    display: none;
  }
  .envelope__part {
    width: 0; height: 0;
    border: $envelopeSizePx/2+px solid transparent;
    transition: all 0.5s ease;
    position: absolute;
  }
  .part1 {
    border-bottom-color: $outerColor;
    transform-origin: bottom;
  }
  .part2 {
    border-left-color: $outerColor;
    transform-origin: left;
  }
  .part3 {
    border-top-color: $outerColor;
    transform-origin: top;
  }
  .part4 {
    border-right-color: $outerColor;
    transform-origin: right;
  }
}
0
0

Здравствуйте, попробуйте так:

.romb-main{
 margin:150px;
}

#romb{
  height:200px;
  width:200px;
  background:navy;
    transform: rotate(45deg) ;
    -webkit-transform: rotate(45deg) ;
    -moz-transform: rotate(45deg) ;
    -o-transform: rotate(45deg) ;
    -ms-transform: rotate(45deg) ;
}
#romb:hover{
  cursor:pointer;
  }
#romb:hover > .r-tr{
  position:absolute;
width: 0;
height: 0;
right:0px;
top:-100px;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #007bff transparent;
}
#romb:hover > .l-tr{
  position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 100px 0;
border-color: transparent #007bff transparent transparent;
left:-100px;
top:0;
}
#romb:hover > .ld-tr{
width: 0;
height: 0;
border-style: solid;
border-width: 100px 0 100px 100px;
border-color: transparent transparent transparent #007bff;
position:absolute;
bottom:0;
right:-100px;
}

#romb:hover > .rd-tr{
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
position:absolute;
left:0;
bottom:-100px;
}
.text{
display:none;
  color: #fff;
    font-size: 25px;
    height: 200px;
    padding: 50px;
    text-align: center;
    vertical-align: baseline;
    width: 200px;
    transform: rotate(-45deg) ;
    -webkit-transform: rotate(-45deg) ;
    -moz-transform: rotate(-45deg) ;
    -o-transform: rotate(-45deg) ;
    -ms-transform: rotate(-45deg) ;  
}

#romb:hover > .text{
  display:block;
}
<div class='romb-main'>

<div id='romb'>
<div class='text'>
Text
</div>
 <div class='l-tr'></div>
 <div class='r-tr'></div> 
 <div class='ld-tr'></div>
 <div class='rd-tr'></div>
</div>

</div>

Если добавить css анимацию будет более плавно все происходить.

1
  • Не совсем то. Каждая часть должна раскрываться, будто сложена пополам в квадрат. В сложенном виде ромб представлен в целом виде, т.е в нем может быть единый background
    – Andrew
    17 ноя 2016 в 12:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.