LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS Tombola

First attempt to build and animate 3D shapes - hover to spin the tombola

One
Two
Three
Four
Five
Six
Seven
Eight

The main sticking point was realising that translateZ() happens after the rotation of the panels. Also getting the tombola to rotate around the 'center' point using the 'Z' attribute of the transform-origin property

To-do: Some sort of 'lighting' effect.

CSS
* {
  box-sizing: border-box;
}
body {
  text-align: center;
  width: 800px;
  margin: auto;
}
.wrapper {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
          perspective-origin: 50% 50%;
}
.tombola {
  position: relative;
  width: 600px;
  height: 200px;
  margin: 120px auto;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center center -480px;
          transform-origin: center center -480px;
  -webkit-transform: rotateX(0deg) translateZ(-480px);
          transform: rotateX(0deg) translateZ(-480px);
  -webkit-transition: 4s ease all;
  transition: 4s ease all;
}
.panel {
  top: 0px;
  padding: 60px;
  font-size: 40px;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute;
  width: 600px;
  height: 200px;
  color: white;
  text-align: center;
  line-height: 2em;
  background: #94DBAF;
  border: 1px solid #297a48;
}
.p1 {
  -webkit-transform: translateZ(240px);
          transform: translateZ(240px);
  background: #94DBAF;
  border: 1px solid #297a48;
}
.p2 {
  -webkit-transform: rotateX(-45deg) translateZ(240px);
          transform: rotateX(-45deg) translateZ(240px);
  background: #94d2db;
  border: 1px solid #296f7a;
}
.p3 {
  -webkit-transform: rotateX(-90deg) translateZ(240px);
          transform: rotateX(-90deg) translateZ(240px);
  background: #949cdb;
  border: 1px solid #29337a;
}
.p4 {
  -webkit-transform: rotateX(-135deg) translateZ(240px);
          transform: rotateX(-135deg) translateZ(240px);
  background: #c194db;
  border: 1px solid #5c297a;
}
.p5 {
  -webkit-transform: rotateX(-180deg) translateZ(240px);
          transform: rotateX(-180deg) translateZ(240px);
  background: #db94c0;
  border: 1px solid #7a295b;
}
.p6 {
  -webkit-transform: rotateX(-225deg) translateZ(240px);
          transform: rotateX(-225deg) translateZ(240px);
  background: #db9d94;
  border: 1px solid #7a3429;
}
.p7 {
  -webkit-transform: rotateX(-270deg) translateZ(240px);
          transform: rotateX(-270deg) translateZ(240px);
  background: #dbd294;
  border: 1px solid #7a7029;
}
.p8 {
  -webkit-transform: rotateX(45deg) translateZ(240px);
          transform: rotateX(45deg) translateZ(240px);
  background: #aedb94;
  border: 1px solid #477a29;
}
JS
// Script to randomise the panel the tombola lands on

$('.tombola').mouseenter(function(){
  var rotation = [1440,1485,1530,1575,1620,1665,1710,1755];
  var pick = Math.floor(Math.random()*8);
  var spin = rotation[pick];
 $('.tombola').css({'transform':'rotateX('+spin+'deg) translateZ(-480px)'});
});

$('.tombola').mouseleave(function(){
  $('.tombola').css({'transform':'rotateX(0deg) translateZ(-480px)'});
});

Description

First attempt to build and animate 3D shapes - hover to spin the tombola
Term
Tue, 11/28/2017 - 13:41

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv