.sandwitch_container
.sandwitch
.left
.right
.wall1
.wall2
.wall3
.ham
.cucumber
.buttons
%button.x 縦に回転
%button.y 横に回転
%button.z 奥に回転
View Compiled
$sw_size: 100px
$sw_thick: 30px
$sw_color: AntiqueWhite
$left_color: $sw_color
$right_color: $sw_color
$wall1_color: $sw_color
$wall2_color: $sw_color
$wall3_color: $sw_color
*
box-sizing: border-box
html, body
overflow: hidden
height: 100%
width: 100%
background: black
perspective: 2000px
transform-origin: 50% 50%
.sandwitch_container
width: $sw_size * 2
height: $sw_size * 3
transform-style: preserve-3d
transform-origin: 50% 50% #{$sw_size / 2}
transition: transform 1s
background: transparent
.sandwitch
position: absolute
top: calc(50% - #{$sw_size / 2})
left: calc(50%)
height: $sw_size
display: inline-block
transform-origin: 50% 50% #{$sw_size / 2}
transform: rotateX(-35deg) rotateY(-20deg) translate3d(-50%, -50%, #{$sw_size / 2})
transform-style: preserve-3d
perspective: 2000px
> *
transform-origin: 0
.left, .right
position: absolute
top: 0
left: 0
display: inline-block
border-bottom: $sw_size solid $sw_color
border-right: $sw_size solid transparent
color: skyblue
.left
border-bottom-color: $left_color
transform-origin: 0
transform: translate3d(0, 0px, 0)
.right
border-bottom-color: $right_color
transform: translate3d(0, 0px, -$sw_thick)
.wall1, .wall2, .wall3
position: absolute
top: 0
left: 0
width: $sw_thick
height: $sw_size
border: 1px solid sienna
border-top: none
border-bottom: none
.wall1
background: $wall1_color
transform: rotate3d(0, 1, 0, 90deg)
border: 1px 0 1px 0 solid gray
.wall2
transform-origin: 0 100%
background: $wall1_color
transform: rotateY(90deg) rotateX(-90deg)
.wall3
transform-origin: 0 0
background: $wall1_color
transform: rotateY(90deg) rotateX(45deg) scale(1, 1.4142)
.ham
box-shadow: 0 0 2px 1px hotpink
background: pink
height: 80%
width: 20%
border-radius: 30%
position: absolute
top: 50%
left: 40%
transform: translate(-50%, -50%)
.cucumber
background-image: linear-gradient(lightgreen, green 30%, green 70%, lightgreen)
background-size: 20%
height: 80%
width: 20%
border-radius: 20%
position: absolute
top: 50%
left: 60%
transform: translate(-50%, -50%)
View Compiled
$ ->
container = $('.sandwitch_container')
t =
x: 0
y: 0
z: 0
set_t = ->
container.css
transform: ['rotateX(' + t.x + 'deg)', 'rotateY(' + t.y + 'deg)', 'rotateZ(' + t.z + 'deg)'].join(' ')
$(document).on 'click', '.buttons button', ->
t[$(this).attr('class')] += 10
set_t()
View Compiled
This Pen doesn't use any external CSS resources.