More 3D transforms practice


by Jeremy Caudle
code

After having some fun with the 3d transforms I did yesterday, I thought I'd try animating a button in 3d. It took a bit of time to get a decent result that I am okay with, but I want to figure out how to get the crispest image. I have much to learn and I look forward to it.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <div class="card">
            <button><span>&starf;</span> Press Me <span>&starf;</span></button>
        </div>
</div>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin:0;
            width: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .card {
            border: solid 1px #dedede;
            min-height: 10em;
            max-width: 15em;
            padding: 1em;
            position: relative;
            margin: 1rem auto;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
        }


        /* Button Styles */

        button {
            display: block;
            cursor: pointer;
            margin: 0 auto;
            border-radius: .25rem;
            border: none;
            background-color: orange;
            color: #343434;
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
            transition: all .125s ease-in;
            padding: .25rem 1rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            border: solid 2px #ff7700;
        }

        button:hover, button:focus {
            background-color: rgb(255, 196, 0);
        }

        button:hover > span:first-of-type, button:focus > span:first-of-type {
            perspective-origin: center;
            transform: perspective(30px) translate3d(-50%, 5%, 15px) rotateY(0deg) rotate(90deg);
        }

        button:hover > span:last-of-type, button:focus > span:last-of-type {
            perspective-origin: center;
            transform: perspective(30px) translate3d(50%, 5%, 15px) rotateY(0deg) rotate(-90deg);
            text-shadow: none;
        }

        button:active {
            transform: perspective(30px) translate3d(0, 0, -10px) rotateY(0deg);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        button:active > span {
            transform: perspective(30px) translate3d(50%, 5%, 15px) rotateY(0deg) rotate(-90deg);
        }

        button > span {
            display: inline-block;
            transition: transform .5s cubic-bezier(.79,.14,.15,.86);
            transform: perspective(0) translate3d(0, 0, 0) rotateY(0);
        }

Tags