3D Ham Sandwich Animation V2.0
Tags: devchallenge, css, html
Published: 2024-03-27 16:06:16

So, I created a [prior post](https://dev.to/softwaredeveloping/3d-ham-sandwich-animation-5cdl) with the first version of this ham sandwich. But, as time went by, a major improvement came to mind. I thought, instead of the sandwich spinning, and changing size, when hovered on, it would look much better if it came apart when hovered on. So, I edited my code and improved the sandwich in a few other ways too.

Now I submit the changed code as a second entry for the contest:

### HTML
``` html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ham Sandwich</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <section>
            <div class="top-bread">
                <div class="top-crust">
                    <div class="top-center"></div>
                </div>
            </div>
            <div class="mayo-and-hot-sauce">
                <div class="blob primary-blob"></div>
                <div class="blob blob-one"></div>
                <div class="blob blob-two"></div>
                <div class="blob blob-three"></div>
                <div class="blob blob-four"></div>
                <div class="blob blob-five"></div>
                <div class="blob blob-six"></div>
                <div class="blob blob-seven"></div>
                <div class="blob blob-eight"></div>
            </div>
            <div class="ham-edge-one">
                <div class="ham-layer-one"></div>
            </div>
            <div class="ham-edge-two">
                <div class="ham-layer-two"></div>
            </div>
            
            <div class="bottom-bread">
                <div class="bottom-crust">
                    <div class="bottom-center"></div>
                </div>
            </div>
        </section>
    </body>
</html>
```
### CSS
``` css
*{
    box-sizing: border-box;
}
:root{
    --ham-background: linear-gradient(
        45deg,
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160)
    );
    --ham-border-background: linear-gradient(
        45deg,
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180)
    );
    --ham-background-two: linear-gradient(
        45deg,
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120)
    );
    --ham-border-background-two: linear-gradient(
        45deg,
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140)
    );
    --trans-animation: margin-top 2s cubic-bezier(.99,-0.01,1,.99);
}
body{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
section{
    height: 300px;
    width: 600px;
    display: grid;
    justify-content: center;
}
section:hover{
    .mayo-and-hot-sauce{
        margin-top: -130px;
    }
    .ham-edge-one{
        margin-top: -70px;
    }
    .ham-edge-two{
        margin-top: -70px;
    }
    .bottom-bread{
        margin-top: -70px;
    }
}   
.top-bread{
    display: grid;
    z-index: 1;
}
.top-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.top-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
.mayo-and-hot-sauce{
    height: 0px;
    display: grid;
    margin-top: -168px;
    margin-left: 0px;
    background: rgb(255,180,170);
    border-radius: 200px 10px 200px 10px;
    transform-style: preserve-3d;
    transition: var(--trans-animation);
}
.blob{
    background: rgb(255,180,170);
    box-shadow: 0px 0px 4px 2px rgb(255,180,170);
    z-index: -1;
    transform: translateZ(-100px);
}
.primary-blob{
    position: absolute;
    width: 330px;
    height: 114px;
    margin-top: 10px;
    margin-left: 10px; 
    background: inherit;
    transform: skewX(-50deg);
    border-radius: 10px 40px 1px 30px;
}
.blob-one{
    width: 40%;
    margin-left: 245px;
    margin-top: 15px;
    border-radius: 30px 10px 25px 0px;
    height: 35px;
    transform: rotate(10deg);
}
.blob-two{
    width: 80%;
    height: 40px;
    margin-left: 45px;
    margin-top: 25px;
    border-radius: 0px 10px 90px 0px;
    transform: rotate(2deg);
}
.blob-three{
    width: 80%;
    height: 20px;
    width: 30px;
    margin-left: 20px;
    margin-top: 0px;
    border-radius: 0px 0px 25px 50px;
    transform: rotate(20deg);
}
.blob-four{
    width: 80%;
    height: 20px;
    width: 50px;
    margin-left: 220px;
    margin-top: -20px;
    border-radius: 0px 0px 50px 50px;
    transform: rotate(10deg);
}
.blob-five{
    width: 50px;
    height: 25px;
    margin-left: 90px;
    margin-top: -22px;
    transform: rotate(-20deg);
    border-radius: 0px 0px 115px 80px;
}
.blob-six{
    height: 40px;
    width: 50px;
    margin-left: -40px;
    margin-top: -45px;
    border-radius: 16px 0px 10px 20px;
    transform: rotate(-20deg);
}
.blob-seven{
    height: 30px;
    width: 60px;
    margin-top: -30px;
    margin-left: 130px;
    border-radius: 0px 0px 25px 40px;
    transform: rotate(-15deg);
}
.blob-eight{
    height: 60px;
    width: 30px;
    margin-left: 330px;
    margin-top: -120px;
    border-radius: 0px 0px 20px 0px;
    transform: rotate(20deg);
}
.ham-edge-one{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background);
    padding: 0px 3px 3px 0px;
    z-index: -1;
    margin-top: -180px;
    margin-left: -15px;
    transition: var(--trans-animation);
}
.ham-layer-one{
    width: 370px;
    height: 128px;
    background: var(--ham-background-two);
    border-radius: 10px 27px 10px 24px;
}
.ham-edge-two{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background-two);
    padding: 0px 3px 3px 0px;
    z-index: -2;
    margin-top: -205px;
    margin-left: -14px;
    transition: var(--trans-animation);
}
.ham-layer-two{
    width: 370px;
    height: 128px;
    background: var(--ham-background);
    border-radius: 10px 27px 10px 24px;
}
.bottom-bread{
    display: grid;
    z-index: -3;
    margin-top: -220px;
    transition: var(--trans-animation);
}
.bottom-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.bottom-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
```
Also, here's a [link](https://codepen.io/Front-End-Learner/pen/GRLvyee) to the project in codePen.

If anyone has any improvement to suggest, please do. 😁