- title = 'Paróquia'
- reference_post = 'https://masp.org.br/exposicoes/tarsila-popular'
- reference_post_title = 'Capivari'
- author_name = 'Tarsila do Amaral'
- author_profile = 'https://pt.wikipedia.org/wiki/Tarsila_do_Amaral'
figure
.figure-content
.ground
#tower.block
.face-top
.face-front
.window
.door
.face-side
.window
#tower-roof.pyramid
.face-top
.face-front
.face-side
#left-wall.block
.face-top
.face-front
.face-side
.window
.window
.window
#right-wall.block
.face-top
.face-front
.window
.window
.window
.face-side
#tree-1.tree
#tree-2.tree
#tree-3.tree
#tree-4.tree
.overlay
br
figcaption
strong.figcaption-title= title
br
.figcaption-description
| inspired in
|
a.figcaption-hyperlink(href=reference_post target='_blank')
= reference_post_title
|
| by
|
a.figcaption-hyperlink(href=author_profile target='_blank')
= author_name
View Compiled
#tower
--sX: 60px
--sY: 60px
--sZ: 140px
--cF: #FFF
--cS: #F6F6F6
.face-front
border-top: 7px solid #E6E6E6
border-bottom: 10px solid #F6F6F6
display: flex
flex-direction: column
justify-content: space-between
align-items: center
.window
width: 40px
height: 40px
margin-top: 10px
background-color: #888
border-top: 2px solid #AAA
border-right: 7px solid #BBB
border-radius: 23px 23px 0 0
.door
width: 30px
height: 40px
margin-bottom: -10px
background-color: #B96
border-top: 1px solid #CCC
border-right: 5px solid #DDD
border-radius: 15px 15px 0 0
.face-side
border-right: 7px solid #BBB
border-left: 10px solid #DDD
display: flex
justify-content: flex-end
align-items: center
.window
width: 40px
height: 40px
margin-right: 10px
background-color: #666
border-top: 7px solid #BBB
border-right: 2px solid #AAA
border-radius: 0 23px 23px 0
#tower-roof
--sX: 70px
--sY: 70px
--sZ: 100px
--pZ: 135px
--cF: #F96
--cS: #E74
#left-wall
--sX: 80px
--sY: 240px
--sZ: 100px
--pX: 40px
--pY: -150px
--cS: #EEE
--cT: #E74
.face-side
padding: 45px 0
border-right: 5px solid #CCC
border-left: 10px solid #DDD
display: flex
flex-direction: column
justify-content: space-around
align-items: center
.window
width: 30px
height: 63px
background-color: #666
border-top: 2px solid #AAA
border-left: 7px solid #BBB
border-radius: 15px 15px 0 0
transform: rotate(90deg)
.face-top
transform: translateZ(var(--sZ)) rotateY(-45deg) translateZ(33px)
#right-wall
--sX: 340px
--sY: 80px
--sZ: 60px
--pX: 200px
--pY: -40px
--cT: #F96
--cF: #FFF
.face-front
padding: 0 45px
display: flex
border-top: 7px solid #DDD
border-bottom: 10px solid #EEE
justify-content: space-around
align-items: center
.window
width: 30px
height: 33px
background-color: #888
border-top: 2px solid #BBB
border-right: 7px solid #CCC
border-radius: 15px 15px 0 0
.face-top
transform: translateZ(var(--sZ)) rotateX(-45deg) translateZ(33px)
#tree-1
--sX: 80px
--sZ: 200px
--pX: -210px
--pY: -330px
#tree-2
--sX: 30px
--sZ: 75px
--pX: -130px
--pY: -130px
#tree-3
--sX: 60px
--sZ: 250px
--pX: 110px
--pY: -330px
#tree-4
--sX: 30px
--sZ: 75px
--pX: 200px
--pY: -200px
// Figure Layout 📰
*
box-sizing: border-box
.figure-content
background-image: linear-gradient(125deg, #BEF, #FEB)
display: flex
justify-content: center
align-items: center
perspective: 500px
transition: perspective 300ms
&:hover
perspective: 750px
.ground
transform: rotateX(100deg) translate3D(0, 50px, -155px) rotateZ(7deg)
.ground
width: 1000px
height: 1000px
background-color: #FEB
display: flex
justify-content: center
align-items: center
transform: rotateX(110deg) translate3D(0, 100px, -180px)
transform-style: preserve-3d
transition: transform 300ms
flex: 0 0 auto
.block, .pyramid
--pX: 0px
--pY: 0px
--pZ: 0px
width: var(--sX)
height: var(--sY)
transform: rotateZ(-45deg) translate3d(var(--pX), var(--pY), var(--pZ))
transform-style: preserve-3d
position: absolute
.face-top
width: var(--sX)
height: var(--sY)
background-color: var(--cT, none)
transform: translateZ(var(--sZ))
.face-front
width: var(--sX)
height: var(--sZ)
margin-top: calc(var(--sZ) * -1)
background-color: var(--cF, none)
transform: rotateX(-90deg)
transform-origin: bottom center
.face-side
width: var(--sZ)
height: var(--sY)
margin-top: calc(var(--sY) * -1)
background-color: var(--cS, none)
transform: rotateY(-90deg)
transform-origin: center left
.pyramid
.face-top
opacity: 0
.face-front
clip-path: polygon(0 100%, 50% 0, 100% 100%)
transform: rotateX(-69.4deg)
.face-side
clip-path: polygon(0 100%, 0 0, 100% 50%)
transform: rotateY(-69.4deg)
.tree
--pX: 0
--pY: 0
--pZ: 0
width: var(--sX)
height: var(--sZ)
background: var(--c, #8C5)
border-top: 1px solid #AE7
border-right: 3px solid #AE7
border-bottom: 5px solid #7B4
border-top-left-radius: 50% 90%
border-top-right-radius: 50% 90%
border-bottom-left-radius: 50% 10%
border-bottom-right-radius: 50% 10%
transform: translate3d(var(--pX), var(--pY), var(--pZ)) rotateX(-90deg)
transform-origin: bottom center
position: absolute
.overlay
width: 550px
height: 400px
background-image: linear-gradient(125deg, #24F, #F92)
mix-blend-mode: soft-light
position: absolute
// Page layout 📰
body
height: 100vh
background-color: #FFF
overflow: hidden
display: flex
flex-direction: column
justify-content: center
align-items: center
figcaption
margin: 0 5px
color: #111
font-size: 16px
font-weight: 300
font-family: 'Roboto', sans-serif
position: absolute
.figcaption-title
font-size: 1.3em
.figcaption-hyperlink
color: #29F
.figure-content
width: 550px
height: 400px
overflow: hidden
user-select: none
cursor: default
View Compiled
// Looking for something?
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.