.card
-(1..4).each do |i|
.card_edge
.card_background
| <svg width="165" height="145" viewBox="0 0 165 145" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M136 22.5L150.5 88.5L93.5 40.5L100 10L136 22.5Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M89.5 24.5L109 49L73 76.5L59.5 34.5L89.5 24.5Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M144 123L133.5 145L111 95L164.5 114L144 123Z" fill="#F5E9BE" fill-opacity="0.36"/></svg>
| <svg width="165" height="145" viewBox="0 0 165 145" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L66.5 20.5L106 59L48 48.5L0 0Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M145 85V135.5L117 63.5L156.5 54L145 85Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M165 20L107 131V70L132.5 31L165 20Z" fill="#F5E9BE" fill-opacity="0.36"/></svg>
| <svg width="100" height="71" viewBox="0 0 100 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M62 41L53 60H0L33 31L62 41Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M100 51L74 71L66 44L74 0L100 51Z" fill="#F5E9BE" fill-opacity="0.36"/></svg>
| <svg width="64" height="58" viewBox="0 0 64 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M64 0L0 58L10 23L28 0H64Z" fill="#F5E9BE" fill-opacity="0.36"/></svg>
| <svg width="165" height="269" viewBox="0 0 165 269" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M117 223L108 242H55L88 213L117 223Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M155 233L129 253L121 226L129 182L155 233Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M155 211L91 269L101 234L119 211H155Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M0 0L66.5 20.5L106 59L48 48.5L0 0Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M136 22.5L150.5 88.5L93.5 40.5L100 10L136 22.5Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M145 85V135.5L117 63.5L156.5 54L145 85Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M89.5 24.5L109 49L73 76.5L59.5 34.5L89.5 24.5Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M165 20L107 131V70L132.5 31L165 20Z" fill="#F5E9BE" fill-opacity="0.36"/><path d="M144 123L133.5 145L111 95L164.5 114L144 123Z" fill="#F5E9BE" fill-opacity="0.36"/></svg>
.info
.svg
.svg_body
-(1..5).each do |i|
| <svg width="86" height="94" viewBox="0 0 86 94" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M43 44.9454L36.8371 33.5H49.1629L43 44.9454Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M42.9968 68.352L36.0706 54.1365L43.0005 47.2066L49.8608 54.0669L42.9968 68.352Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M26.3368 39.9416L35.7839 35.6476L40.9367 45.0945L26.3368 39.9416Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M59.6549 39.9631L50.2078 35.6691L45.055 45.116L59.6549 39.9631Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M36.0344 84.5H49.9537L42.9304 93.1996L36.0344 84.5Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M66.7269 65.7645L72.3764 64.6346L71.979 66.8202C71.6858 68.4333 70.98 69.943 69.9304 71.2025L67.7706 73.7942C67.0451 74.6648 66.1698 75.3985 65.1858 75.9608L61.305 78.1784C60.3291 78.7361 59.2621 79.1161 58.1534 79.3009L54.7197 79.8731L56.4373 74.3769C56.7765 73.2915 57.3078 72.2758 58.006 71.3781L58.8821 70.2517C59.8259 69.0382 61.0502 68.0719 62.4498 67.4357L64.6589 66.4316C65.3204 66.1308 66.0143 65.907 66.7269 65.7645Z" fill="#C4C4C4" fill-opacity="0.5" stroke="#00E0FF"/><path d="M19.2731 65.7645L13.6236 64.6346L14.021 66.8202C14.3142 68.4333 15.02 69.943 16.0696 71.2025L18.2294 73.7942C18.9549 74.6648 19.8302 75.3985 20.8142 75.9608L24.695 78.1784C25.6709 78.7361 26.7379 79.1161 27.8466 79.3009L31.2803 79.8731L29.5627 74.3769C29.2235 73.2915 28.6922 72.2758 27.994 71.3781L27.1179 70.2517C26.1741 69.0382 24.9498 68.0719 23.5502 67.4357L21.3411 66.4316C20.6796 66.1308 19.9857 65.907 19.2731 65.7645Z" fill="#C4C4C4" fill-opacity="0.5" stroke="#00E0FF"/><path d="M46.6719 68.1227L46.5 68.2722V68.5V82.5H45.5V68.1104L51.8871 54.3537L60.2285 49.5244L58.0531 58.226L46.6719 68.1227Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M39.3281 68.1227L39.5 68.2722V68.5V82.5H40.5V68.1104L34.1129 54.3537L25.7715 49.5244L27.9469 58.226L39.3281 68.1227Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M53.7846 75.8172L53.7788 75.8319L53.774 75.847L51.6355 82.5H48.5V69.2278L58.6298 60.4193L57.7649 63.8787L56.5228 68.8473L53.7846 75.8172Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M32.2154 75.8172L32.2212 75.8319L32.226 75.847L34.3645 82.5H37.5V69.2278L27.3702 60.4193L28.2351 63.8787L29.4772 68.8473L32.2154 75.8172Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M62.4831 41.0397L66.0624 42.6305L60.7169 47.0851L51.088 52.3809L45.9045 47.1974L62.4831 41.0397Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M23.5169 41.0397L19.9376 42.6305L25.2831 47.0851L34.912 52.3809L40.0955 47.1974L23.5169 41.0397Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M61.4851 59.1213L61.4899 59.1019L61.4932 59.0822L63.2404 48.5989L67.5 57.118V63.6396L59.706 66.2376L61.4851 59.1213Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M24.5149 59.1213L24.5101 59.1019L24.5068 59.0822L22.7596 48.5989L18.5 57.118V63.6396L26.294 66.2376L24.5149 59.1213Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M69.271 55.4413L64.6263 46.6164L68.0294 43.6386L81.2619 53.2208L69.271 55.4413Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M16.729 55.4413L21.3737 46.6164L17.9706 43.6386L4.7381 53.2208L16.729 55.4413Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M69.5 62.8596V57.4186L81.1523 55.3379L72.7729 62.0414L69.5 62.8596Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M16.5 62.8596V57.4186L4.84771 55.3379L13.2271 62.0414L16.5 62.8596Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M83.6095 74.0575L75.6851 62.6112L82.745 57.3162L84.4937 62.5623L83.6095 74.0575Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M2.39052 74.0575L10.3149 62.6112L3.25497 57.3162L1.50627 62.5623L2.39052 74.0575Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M68.9049 79.0075L63.0641 79.6565L65.7069 78.4552L65.7715 78.4258L65.8254 78.3796L69.3254 75.3796L69.3611 75.349L69.3904 75.3123L73.3904 70.3123L73.4586 70.2271L73.4851 70.1213L74.7191 65.185L80.8304 73.9154L77.759 76.548L68.9049 79.0075Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M17.0951 79.0075L22.9359 79.6565L20.2931 78.4552L20.2285 78.4258L20.1746 78.3796L16.6746 75.3796L16.6389 75.349L16.6096 75.3123L12.6096 70.3123L12.5414 70.2271L12.5149 70.1213L11.2809 65.185L5.16957 73.9154L8.24096 76.548L17.0951 79.0075Z" fill="#C4C4C4" stroke="#FF0000"/><path d="M68.5581 41.7885L71.7429 27.2293L80.0062 39.1652L80.459 50.4854L68.5581 41.7885Z" fill="#C4C4C4" stroke="black"/><path d="M17.4419 41.7885L14.2571 27.2293L5.99379 39.1652L5.54098 50.4854L17.4419 41.7885Z" fill="#C4C4C4" stroke="black"/><path d="M81.3663 36.9696L85.4836 26.4476L83.1843 13.1115L72.6411 25.0299L81.3663 36.9696Z" fill="#C4C4C4" stroke="black"/><path d="M4.63371 36.9696L0.516412 26.4476L2.81573 13.1115L13.3589 25.0299L4.63371 36.9696Z" fill="#C4C4C4" stroke="black"/><path d="M71.2026 24.0848L51.7259 32.6907L77.8579 0.959037L82.4154 11.8969L71.2026 24.0848Z" fill="#C4C4C4" stroke="black"/><path d="M14.7974 24.0848L34.2741 32.6907L8.14207 0.959037L3.58461 11.8969L14.7974 24.0848Z" fill="#C4C4C4" stroke="black"/><path d="M58.2099 37.0452L52.6572 34.0553L69.7903 26.8414L66.644 40.3251L58.2099 37.0452Z" fill="#C4C4C4" stroke="black"/><path d="M27.2901 37.0452L32.8428 34.0553L15.7097 26.8414L18.856 40.3251L27.2901 37.0452Z" fill="#C4C4C4" stroke="black"/></svg>
h5.title
| Anna Batura
-(1..3).each do |i|
span Anna Batura
.footer
.btn
.btn_body
-(1..4).each do |i|
.btn_edge
span.btn_text
| Go to profile
-(1..5).each do |i|
span Go to profile
@import "compass/css3"
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap')
\:root
--height: 40px
--height-card: 8px
--color: #b4ff00
+keyframes (pathr)
0%, 100%
opacity: 0.8
@include transform(rotate(2deg))
50%
opacity: 1
@include transform(rotate(0deg))
+keyframes (card)
0%
@include transform(scale(2) rotateY(-34.35deg) rotateX(10deg))
100%
@include transform(scale(1) rotateY(34.35deg) rotateX(12.05deg))
html
height: 100%
body
margin: 20px
background-color: #131258
height: 100%
display: flex
align-items: center
justify-content: center
font-family: 'Nunito', sans-serif
.card
position: relative
transform-style: preserve-3d
width: 300px
height: 200px
background-color: #fff
background: linear-gradient(40deg, rgba(56, 61, 177, 1), #42a996)
box-shadow: 0 5px 15px rgba(164, 106, 220, 0.5)
@include transform(rotateY(34.35deg) rotateX(12.05deg))
@include animation(card 3s forwards ease-in-out)
animation-fill-mode: none
will-change: transform
&_background
position: absolute
right: -10px
top: -20px
bottom: -10px
svg
position: absolute
right: 0
top: 0
transform-style: preserve-3d
will-change: transform
@include transform(translateZ(25px))
@include transition(all 0.3s)
&:nth-child(2n)
right: -10px
top: -10px
@include transform(translateZ(10px))
path
@include animation(pathr 3s infinite ease-in-out)
&:nth-child(3)
top: auto
bottom: -10px
&:nth-child(4)
top: auto
bottom: -10px
&:nth-child(5)
top: -5px
@include transform(translateZ(8px))
path
fill: rgba(114, 135, 216, 0.4)
&_edge
position: absolute
width: 100%
height: 100%
left: 0
top: 0
background: #358ed0
opacity: 0.5
transform-style: preserve-3d
transform-origin: 0% 0%
will-change: transform
&:nth-child(1)
height: var(--height-card)
background: #6ab8e1
@include transform(rotateX(-90deg))
&:nth-child(2)
left: auto
right: 0
width: var(--height-card)
transform-origin: 100% 100%
@include transform(rotateY(-90deg))
&:nth-child(3)
top: auto
bottom: 0
height: var(--height-card)
transform-origin: 100% 100%
@include transform(rotateX(90deg))
&:nth-child(4)
width: var(--height-card)
background: #6ab8e1
@include transform(rotateY(90deg))
.info
width: 100%
height: calc(100% - 40px)
display: flex
align-items: center
justify-content: center
.title
position: relative
margin: 10px 0
font-size: 16px
color: rgba(00, 00, 00, 0.4)
span
top: 0
left: 0
position: absolute
transform-style: preserve-3d
will-change: transform
color: rgba(164, 106, 220, 1)
@include transform(translateZ(18px))
&:nth-child(2)
color: rgba(64, 244, 255, 4)
@include transform(translateZ(16px))
&:nth-child(3)
color: var(--color)
@include transform(translateZ(14px))
.svg
position: relative
&_body
width: 86px
height: 94px
svg
position: absolute
left: 0
top: 0
will-change: transform
@include transform(translateZ(30px))
path
fill: rgba(114, 135, 216, 0.4)
stroke: none
&:nth-child(2)
@include transform(translateZ(28px))
path
fill: rgba(0, 0, 0, 0.2)
&:nth-child(2)
@include transform(translateZ(26px))
path
fill: #aa76f8
&:nth-child(4)
@include transform(translateZ(24px))
path
fill: var(--color)
&:nth-child(5)
@include transform(translateZ(0))
path
fill: rgba(0, 0, 0, 0.2)
.btn
cursor: pointer
position: relative
transform-style: preserve-3d
transform-origin: 50% 50%
transform-origin: 50% 50%
transform-origin: 100% 0%
will-change: transform
@include transition(all 0.3s)
@include transform(translateZ(0))
&_text
box-sizing: border-box
display: inline-block
position: relative
font-size: 28px
color: rgba(00, 00, 00, 0)
letter-spacing: 1px
pointer-events: none
transform-style: preserve-3d
will-change: transform
@include transform(translateZ(-25px))
@include transition(all 3s)
span
top: 0
left: 0
position: absolute
transform-style: preserve-3d
will-change: transform
@include transform(translateZ(18px))
color: rgba(164, 106, 220, 1)
&:nth-child(2)
@include transform(translateZ(16px))
color: #955cf8
&:nth-child(3)
@include transform(translateZ(14px))
color: #aa76f8
&:nth-child(4)
@include transform(translateZ(12px))
color: var(--color)
&:nth-child(5)
@include transform(translateZ(0))
color: rgba(00, 00, 000, 0.2)
&_body
position: relative
display: inline-block
text-align: center
margin: 0 0 10px
padding: 0 20px
box-sizing: border-box
width: 100%
height: var(--height)
background-color: rgba(114, 135, 216, 0.4)
transform-style: preserve-3d
will-change: transform
transform: translateZ( var(--height))
&_edge
position: absolute
width: 100%
height: 100%
left: 0
top: 0
background: #358ed0
opacity: 0.5
transform-style: preserve-3d
will-change: transform
transform-origin: 0% 0%
&:nth-child(1)
height: var(--height)
background: #6ab8e1
transform: rotateX(-90deg)
&:nth-child(2)
left: auto
right: 0
width: var(--height)
transform-origin: 100% 100%
transform: rotateY(-90deg)
&:nth-child(3)
top: auto
bottom: 0
transform-origin: 100% 100%
transform: rotateX(90deg)
&:nth-child(4)
width: var(--height)
background: #6ab8e1
transform: rotateY(90deg)var card = $(".card");
$(document).on("mousemove",function(e) {
var x = -($(window).innerWidth()/2- e.pageX)/16;
var y = ($(window).innerHeight()/2- e.pageY)/8;
card.attr("style", "transform: rotateY("+x+"deg) rotateX("+y+"deg);-webkit-transform: rotateY("+x+"deg) rotateX("+y+"deg);-moz-transform: rotateY("+x+"deg) rotateX("+y+"deg)");
});
External CSS
This Pen doesn't use any external CSS resources.