61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template lang="pug">
|
|
ul.model-cones-inner
|
|
li.bottom
|
|
li.front
|
|
li.right
|
|
li.left
|
|
</template>
|
|
|
|
<style lang="sass" scoped>
|
|
.model-cones-inner
|
|
position: relative
|
|
top: 8px
|
|
left: 32px
|
|
width: 64px
|
|
height: 64px
|
|
padding: 0
|
|
list-style: none
|
|
display: block
|
|
margin: -25px 0 0 -25px
|
|
-webkit-transform-style: preserve-3d
|
|
transform-style: preserve-3d
|
|
-webkit-transform-origin: 25px 25px
|
|
transform-origin: 25px 25px
|
|
-webkit-transform: rotateY(35deg)
|
|
transform: rotateY(35deg)
|
|
-webkit-animation: slowRotate 6s ease-in-out infinite 0s
|
|
animation: slowRotate 6s ease-in-out infinite 0s
|
|
>li
|
|
position: absolute
|
|
top: 0
|
|
z-index: 10
|
|
border-left: 28.87px solid transparent
|
|
border-right: 28.87px solid transparent
|
|
.bottom
|
|
border-bottom: 50px solid rgba(200, 200, 200, 0.7)
|
|
.front
|
|
border-bottom: 50px solid rgba(80, 80, 80, 0.7)
|
|
-webkit-transform: rotate3d(-1, 1.732, 0, 70.5deg)
|
|
transform: rotate3d(-1, 1.732, 0, 70.5deg)
|
|
-webkit-transform-origin: 25% 50%
|
|
transform-origin: 25% 50%
|
|
.right
|
|
border-bottom: 50px solid rgba(160, 160, 160, 0.7)
|
|
-webkit-transform: rotate3d(1, 0, 0, 70.5deg)
|
|
transform: rotate3d(1, 0, 0, 70.5deg)
|
|
-webkit-transform-origin: 50% 100%
|
|
transform-origin: 50% 100%
|
|
.left
|
|
border-bottom: 50px solid rgba(120, 120, 120, 0.7)
|
|
-webkit-transform: rotate3d(1, 1.732, 0, -70.5deg)
|
|
transform: rotate3d(1, 1.732, 0, -70.5deg)
|
|
-webkit-transform-origin: 75% 50%
|
|
transform-origin: 75% 50%
|
|
@keyframes slowRotate
|
|
0%
|
|
-webkit-transform: rotateY(35deg)
|
|
transform: rotateY(35deg)
|
|
100%
|
|
-webkit-transform: rotateY(395deg)
|
|
transform: rotateY(395deg)
|
|
</style> |