Анимация “конверт”

#javascript #jquery #css #анимация

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

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


    

Ответы

Ответ 1

Вот пример реализации на 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;
}

  

  

  

  

  
Inner content





Из интересного: каждая из четырех частей (которые открываются) являются простыми
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;
  }
}


Ответ 2

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



.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;
}




Text

 

 
 
 

 








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