CIT 261 - Fluency Evidence - CSS3 Transforms Triggered by JavaScript

CSS
                    
.circle {
    display: inline-block;
    width: 33%;   
    border-radius: 50%;
    height: 40px;
    margin: 30px auto;
    width: 40px;
    background: #60D4C8;
}

.circle.scale {
    transform: scale(2);
    transition: all 300ms;
}

.circle.move {
    transform: translate(2em);
    transition: ease, 300ms;
}

.box {
    display: inline-block;
    margin: 30px auto;
    height: 40px;
    width: 40px;
    background-color: blue;
}

.box.rotate {
    transform: rotate(300deg);
    transition: transform 0.5s ease-out;    
    }

    .box.skew {
        transform: skewx(25deg) translatex(25px);
        transform-origin: bottom left;
    }
    
    /* Shorthand classes for different perspective values */
    .pers250 {
        perspective: 250px;
    }
      
    .pers350 {
        perspective: 350px;
    }
      
    .pers500 {
        perspective: 500px;
    }
      
    .pers650 {
        perspective: 650px;
    }
    
    .pov-tl {
        perspective-origin: top left;
    }
    
    .pov150 {
        perspective-origin: 150% 150%;
    }
    
    /* Define the container div, the cube div, and a generic face */
    .container {
        width: 200px;
        height: 200px;
        margin: 75px 0 0 75px;
        border: none;
    }
      
    .cube {
        width: 100%;
        height: 100%;
        backface-visibility: visible;
        transform-style: preserve-3d;
    }
      
    .face {
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
        border: none;
        line-height: 100px;
        font-family: sans-serif;
        font-size: 60px;
        color: white;
        text-align: center;
    }
      
    /* Define each face based on direction */
    .front {
        background: rgba(0, 0, 0, 0.3);
        transform: translateZ(50px);
    }
      
    .back {
        background: rgba(0, 255, 0, 1);
        color: black;
        transform: rotateY(180deg) translateZ(50px);
    }
      
    .right {
        background: rgba(196, 0, 0, 0.7);
        transform: rotateY(90deg) translateZ(50px);
    }
      
    .left {
        background: rgba(0, 0, 196, 0.7);
        transform: rotateY(-90deg) translateZ(50px);
    }
      
    .top {
        background: rgba(196, 196, 0, 0.7);
        transform: rotateX(90deg) translateZ(50px);
    }
      
    .bottom {
        background: rgba(196, 0, 196, 0.7);
        transform: rotateX(-90deg) translateZ(50px);
    }  
                    
                
JavaScript
                    
function scaleCircle() {
    let circle = document.getElementsByClassName('circle')[0];
    let button = document.getElementById('scaleButton');
    if(button.innerHTML==="Scale") {
        circle.classList.add('scale');
        button.innerHTML="Reset";
    } else {
        circle.classList.remove('scale');
        button.innerHTML="Scale";
    }
}

function rotateBox() {
    let box = document.getElementsByClassName('box')[0];
    let button = document.getElementById('rotateButton');
    if(button.innerHTML==="Rotate") {
        box.classList.add('rotate');
        button.innerHTML="Reset";
    } else {
        box.classList.remove('rotate');
        button.innerHTML="Rotate";
    }
}

function skewBox() {
    let box = document.getElementsByClassName('box')[1];
    let button = document.getElementById('skewButton');
    if(button.innerHTML==="Skew") {
        box.classList.add('skew');
        button.innerHTML="Reset";
    } else {
        box.classList.remove('skew');
        button.innerHTML="Skew";
    }
}

function moveCircle() {
    let circle = document.getElementsByClassName('circle')[1];
    let button = document.getElementById('moveButton');
    if(button.innerHTML==="Move") {
        circle.classList.add('move');
        button.innerHTML="Reset";
    } else {
        circle.classList.remove('move');
        button.innerHTML="Move";
    }
}

function changePerspective() {
    let cube = document.getElementsByClassName('cube')[0];
    let button = document.getElementById('changePerspectiveButton');
    if(button.innerHTML==="Stretch") {
        cube.classList.remove('pers650')
        cube.classList.add('pers250');
        button.innerHTML="Reset";
    } else {
        cube.classList.remove('pers250');
        cube.classList.add('pers650');
        button.innerHTML="Stretch";
    }
}

function changeViewpoint() {
    let cube = document.getElementsByClassName('cube')[0];
    let button = document.getElementById('changeViewpointButton');
    if(button.innerHTML==="Change Viewpoint") {
        cube.classList.remove('pov150');
        cube.classList.add('pov-tl');
        button.innerHTML="Reset";
    } else {
        cube.classList.remove('pov-tl');
        cube.classList.add('pov150');
        button.innerHTML="Change Viewpoint";
    }
}                    
                
1
2
3
4
5
6