webmanab.html

menu

CSSで立方体をつくって回転のアニメーションをあたえる -『CSS』

 

demo

CSSのtransformプロパティをうまく使って立方体を作成し、おまけにtransitionでホバーアニメーションをつけました。

CSSで立方体をつくって回転のアニメーションをあたえる


.wrap { display: flex; justify-content: space-around; max-width: 600px; margin: 5em auto; -webkit-perspective: 400; perspective: 400; } .box { width: 100px; height: 100px; } .cube_wrap { height: 100px; width: 100px; position: relative; margin:0 auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 2s; transition: 2s; cursor: pointer; // > div { position: absolute; height: 100px; width: 100px; color: #fff; display: flex; justify-content: center; align-items: center; } // &:hover { -webkit-transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg) ; transform: translate3d(0,0,200px) rotateY(360deg) rotateZ(360deg); } } .cube_top { background: hsla(357,45%,91%,1.00); top: -50px; left: 0px; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .cube_bottom { background: hsla(357,45%,91%,1.00); bottom: -50px; left: 0px; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } .cube_front { background: hsla(217,62%,71%,0.60); top: 0px; left: 0px; -webkit-transform: translateZ(50px); transform: translateZ(50px); } .cube_back { background: hsla(217,62%,71%,0.60); top: 0px; left: 0px; -webkit-transform: translateZ(-50px); transform: translateZ(-50px); } .cube_right { background: hsla(217,62%,71%,0.60); top: 0px; right: -50px; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } .cube_left { background: hsla(217,62%,71%,0.60); top: 0px; left: -50px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }

share

lab