|
|
@@ -170,4 +170,79 @@ ion-slides { |
|
|
|
font-size: 0.9rem; |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// figure { |
|
|
|
// margin: 0; |
|
|
|
// display: block; |
|
|
|
// width: 100%; |
|
|
|
// height: 100%; |
|
|
|
// transition: filter 0.3s; |
|
|
|
// border: 0px; |
|
|
|
// padding: 0; |
|
|
|
// border-radius: 7px; |
|
|
|
// overflow: hidden; |
|
|
|
|
|
|
|
// -webkit-perspective: 1200px; |
|
|
|
// -moz-perspective: 1200px; |
|
|
|
// -ms-perspective: 1200px; |
|
|
|
// perspective: 1200px; |
|
|
|
|
|
|
|
// &.active { |
|
|
|
// img { |
|
|
|
// &:nth-child(1) { |
|
|
|
// animation: sideViewOut 0.3s forwards; |
|
|
|
// } |
|
|
|
|
|
|
|
// &:nth-child(2) { |
|
|
|
// animation: topViewIn 0.3s forwards; |
|
|
|
// animation-delay: 0.1s; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// img { |
|
|
|
// height: 80%; |
|
|
|
// object-fit: contain; |
|
|
|
// display: block; |
|
|
|
// width: 80%; |
|
|
|
// margin: 0 auto; |
|
|
|
// position: absolute; |
|
|
|
// left: 10%; |
|
|
|
// top: 0; |
|
|
|
|
|
|
|
// -webkit-transform-style: preserve-3d; |
|
|
|
// -moz-transform-style: preserve-3d; |
|
|
|
// -ms-transform-style: preserve-3d; |
|
|
|
// transform-style: preserve-3d; |
|
|
|
// transform-origin: 50px 0; |
|
|
|
|
|
|
|
// &:nth-child(2) { |
|
|
|
// transform: translateY(50%)rotateX(90deg); |
|
|
|
// opacity: 0; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// @keyframes sideViewOut { |
|
|
|
// 0% { |
|
|
|
// transform: translateY(0%)rotateX(0deg); |
|
|
|
// } |
|
|
|
// 100% { |
|
|
|
// transform: translateY(50%)rotateX(-90deg); |
|
|
|
// width: 80%; |
|
|
|
// height: 50%; |
|
|
|
// opacity: 0; |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// @keyframes topViewIn { |
|
|
|
// 0% { |
|
|
|
// transform: translateY(50%)rotateX(90deg); |
|
|
|
// opacity: 0; |
|
|
|
// } |
|
|
|
// 100% { |
|
|
|
// transform: translateY(0%)rotateX(0deg); |
|
|
|
// opacity: 1; |
|
|
|
// } |
|
|
|
// } |