Tutorials Add Tilt Transition To User Avatars

Marks-Man

Administrator
Joined: Mar 15, 2021
Messages: 933
Resources: 399
Points: 93
Reaction score: 559
imagee879d52e70fefa0901c0b2f54d0319d5.png

CSS:
.avatar {
    display: block !important;
    height: 46px !important;
    width: 46px !important;
    background: var(--main-front-color);
    background: -webkit-linear-gradient(to right, #ffc837, var(--main-front-color));
    background: linear-gradient(to right, #ffc837, var(--main-front-color));
    -webkit-clip-path: polygon(45% 1.33975%, 46.5798% .60307%, 48.26352% .15192%, 50% 0%, 51.73648% .15192%, 53.4202% .60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146000000001% 23.57212%, 93.30127% 25%, 94.03794000000001% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794000000001% 73.42019999999999%, 93.30127% 75%, 92.30146000000001% 76.42788%, 91.06889% 77.66043999999999%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66043999999999%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.42019999999999%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
    clip-path: polygon(45% 1.33975%, 46.5798% .60307%, 48.26352% .15192%, 50% 0%, 51.73648% .15192%, 53.4202% .60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146000000001% 23.57212%, 93.30127% 25%, 94.03794000000001% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794000000001% 73.42019999999999%, 93.30127% 75%, 92.30146000000001% 76.42788%, 91.06889% 77.66043999999999%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66043999999999%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.42019999999999%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%);
    transition: all 1.5s ease;
    background-position: 0px;
}

CSS:
.avatar.avatar--default.avatar--default--image {
    background: var(--main-front-color);
    background: -webkit-linear-gradient(to right, #ffc837, var(--main-front-color));
    background: linear-gradient(to right, #ffc837, var(--main-front-color));
}
.avatar--default--image:before {
    position: absolute;
    content: "";
    background: orange;
    height: 300px;
    width: 300px;
    background: url(data/assets/default_avatars/icon_test4.png);
}
.avatar_hex {
    width: 46px;
    height: 46px;
    position: relative;
}
.avatar {
    display: block !important;
    height: 46px !important;
    width: 46px !important;
    background: var(--main-front-color);
    background: -webkit-linear-gradient(to right, #ffc837, var(--main-front-color));
    background: linear-gradient(to right, #ffc837, var(--main-front-color));
    -webkit-clip-path: polygon(
        45% 1.33975%,
        46.5798% 0.60307%,
        48.26352% 0.15192%,
        50% 0%,
        51.73648% 0.15192%,
        53.4202% 0.60307%,
        55% 1.33975%,
        89.64102% 21.33975%,
        91.06889% 22.33956%,
        92.30146000000001% 23.57212%,
        93.30127% 25%,
        94.03794000000001% 26.5798%,
        94.48909% 28.26352%,
        94.64102% 30%,
        94.64102% 70%,
        94.48909% 71.73648%,
        94.03794000000001% 73.42019999999999%,
        93.30127% 75%,
        92.30146000000001% 76.42788%,
        91.06889% 77.66043999999999%,
        89.64102% 78.66025%,
        55% 98.66025%,
        53.4202% 99.39693%,
        51.73648% 99.84808%,
        50% 100%,
        48.26352% 99.84808%,
        46.5798% 99.39693%,
        45% 98.66025%,
        10.35898% 78.66025%,
        8.93111% 77.66043999999999%,
        7.69854% 76.42788%,
        6.69873% 75%,
        5.96206% 73.42019999999999%,
        5.51091% 71.73648%,
        5.35898% 70%,
        5.35898% 30%,
        5.51091% 28.26352%,
        5.96206% 26.5798%,
        6.69873% 25%,
        7.69854% 23.57212%,
        8.93111% 22.33956%,
        10.35898% 21.33975%
    );
    clip-path: polygon(
        45% 1.33975%,
        46.5798% 0.60307%,
        48.26352% 0.15192%,
        50% 0%,
        51.73648% 0.15192%,
        53.4202% 0.60307%,
        55% 1.33975%,
        89.64102% 21.33975%,
        91.06889% 22.33956%,
        92.30146000000001% 23.57212%,
        93.30127% 25%,
        94.03794000000001% 26.5798%,
        94.48909% 28.26352%,
        94.64102% 30%,
        94.64102% 70%,
        94.48909% 71.73648%,
        94.03794000000001% 73.42019999999999%,
        93.30127% 75%,
        92.30146000000001% 76.42788%,
        91.06889% 77.66043999999999%,
        89.64102% 78.66025%,
        55% 98.66025%,
        53.4202% 99.39693%,
        51.73648% 99.84808%,
        50% 100%,
        48.26352% 99.84808%,
        46.5798% 99.39693%,
        45% 98.66025%,
        10.35898% 78.66025%,
        8.93111% 77.66043999999999%,
        7.69854% 76.42788%,
        6.69873% 75%,
        5.96206% 73.42019999999999%,
        5.51091% 71.73648%,
        5.35898% 70%,
        5.35898% 30%,
        5.51091% 28.26352%,
        5.96206% 26.5798%,
        6.69873% 25%,
        7.69854% 23.57212%,
        8.93111% 22.33956%,
        10.35898% 21.33975%
    );
    transition: all 1.5s ease;
    background-position: 0px;
}
.avatar img:not(.cropImage) {
    margin-top: -40px !important;
    height: 40px;
    width: 40px;
    -webkit-clip-path: polygon(
        45% 1.33975%,
        46.5798% 0.60307%,
        48.26352% 0.15192%,
        50% 0%,
        51.73648% 0.15192%,
        53.4202% 0.60307%,
        55% 1.33975%,
        89.64102% 21.33975%,
        91.06889% 22.33956%,
        92.30146000000001% 23.57212%,
        93.30127% 25%,
        94.03794000000001% 26.5798%,
        94.48909% 28.26352%,
        94.64102% 30%,
        94.64102% 70%,
        94.48909% 71.73648%,
        94.03794000000001% 73.42019999999999%,
        93.30127% 75%,
        92.30146000000001% 76.42788%,
        91.06889% 77.66043999999999%,
        89.64102% 78.66025%,
        55% 98.66025%,
        53.4202% 99.39693%,
        51.73648% 99.84808%,
        50% 100%,
        48.26352% 99.84808%,
        46.5798% 99.39693%,
        45% 98.66025%,
        10.35898% 78.66025%,
        8.93111% 77.66043999999999%,
        7.69854% 76.42788%,
        6.69873% 75%,
        5.96206% 73.42019999999999%,
        5.51091% 71.73648%,
        5.35898% 70%,
        5.35898% 30%,
        5.51091% 28.26352%,
        5.96206% 26.5798%,
        6.69873% 25%,
        7.69854% 23.57212%,
        8.93111% 22.33956%,
        10.35898% 21.33975%
    );
    clip-path: polygon(
        45% 1.33975%,
        46.5798% 0.60307%,
        48.26352% 0.15192%,
        50% 0%,
        51.73648% 0.15192%,
        53.4202% 0.60307%,
        55% 1.33975%,
        89.64102% 21.33975%,
        91.06889% 22.33956%,
        92.30146000000001% 23.57212%,
        93.30127% 25%,
        94.03794000000001% 26.5798%,
        94.48909% 28.26352%,
        94.64102% 30%,
        94.64102% 70%,
        94.48909% 71.73648%,
        94.03794000000001% 73.42019999999999%,
        93.30127% 75%,
        92.30146000000001% 76.42788%,
        91.06889% 77.66043999999999%,
        89.64102% 78.66025%,
        55% 98.66025%,
        53.4202% 99.39693%,
        51.73648% 99.84808%,
        50% 100%,
        48.26352% 99.84808%,
        46.5798% 99.39693%,
        45% 98.66025%,
        10.35898% 78.66025%,
        8.93111% 77.66043999999999%,
        7.69854% 76.42788%,
        6.69873% 75%,
        5.96206% 73.42019999999999%,
        5.51091% 71.73648%,
        5.35898% 70%,
        5.35898% 30%,
        5.51091% 28.26352%,
        5.96206% 26.5798%,
        6.69873% 25%,
        7.69854% 23.57212%,
        8.93111% 22.33956%,
        10.35898% 21.33975%
    );
    left: 3px;
    top: 3px;
    display: block !important;
    position: relative;
}
.avatar::before {
    content: "";
    display: block;
    position: relative;
    top: 3px !important;
    left: 3px !important;
    height: 40px !important;
    width: 40px !important;
    background-size: cover;
    background-position: center;
    -webkit-clip-path: polygon(
        45% 1.33975%,
        46.5798% 0.60307%,
        48.26352% 0.15192%,
        50% 0%,
        51.73648% 0.15192%,
        53.4202% 0.60307%,
        55% 1.33975%,
        89.64102% 21.33975%,
        91.06889% 22.33956%,
        92.30146000000001% 23.57212%,
        93.30127% 25%,
        94.03794000000001% 26.5798%,
        94.48909% 28.26352%,
        94.64102% 30%,
        94.64102% 70%,
        94.48909% 71.73648%,
        94.03794000000001% 73.42019999999999%,
        93.30127% 75%,
        92.30146000000001% 76.42788%,
        91.06889% 77.66043999999999%,
        89.64102% 78.66025%,
        55% 98.66025%,
        53.4202% 99.39693%,
        51.73648% 99.84808%,
        50% 100%,
        48.26352% 99.84808%,
        46.5798% 99.39693%,
        45% 98.66025%,
        10.35898% 78.66025%,
        8.93111% 77.66043999999999%,
        7.69854% 76.42788%,
        6.69873% 75%,
        5.96206% 73.42019999999999%,
        5.51091% 71.73648%,
        5.35898% 70%,
        5.35898% 30%,
        5.51091% 28.26352%,
        5.96206% 26.5798%,
        6.69873% 25%,
        7.69854% 23.57212%,
        8.93111% 22.33956%,
        10.35898% 21.33975%
    );
    clip-path: polygon(
        45% 1.33975%,
        46.5798% 0.60307%,
        48.26352% 0.15192%,
        50% 0%,
        51.73648% 0.15192%,
        53.4202% 0.60307%,
        55% 1.33975%,
        89.64102% 21.33975%,
        91.06889% 22.33956%,
        92.30146000000001% 23.57212%,
        93.30127% 25%,
        94.03794000000001% 26.5798%,
        94.48909% 28.26352%,
        94.64102% 30%,
        94.64102% 70%,
        94.48909% 71.73648%,
        94.03794000000001% 73.42019999999999%,
        93.30127% 75%,
        92.30146000000001% 76.42788%,
        91.06889% 77.66043999999999%,
        89.64102% 78.66025%,
        55% 98.66025%,
        53.4202% 99.39693%,
        51.73648% 99.84808%,
        50% 100%,
        48.26352% 99.84808%,
        46.5798% 99.39693%,
        45% 98.66025%,
        10.35898% 78.66025%,
        8.93111% 77.66043999999999%,
        7.69854% 76.42788%,
        6.69873% 75%,
        5.96206% 73.42019999999999%,
        5.51091% 71.73648%,
        5.35898% 70%,
        5.35898% 30%,
        5.51091% 28.26352%,
        5.96206% 26.5798%,
        6.69873% 25%,
        7.69854% 23.57212%,
        8.93111% 22.33956%,
        10.35898% 21.33975%
    );
}
.avatar:hover {
    background-position: 46px;
    transition: all 0.5s ease;
    filter: contrast(110%);
    transform: rotate(10deg);
}
.avatar:hover + .hexa_info::before {
    background: green;
}
.avatar_hex_info {
    height: 17px;
    width: 17px;
    position: absolute;
    text-align: center;
    padding-top: 2px;
    right: 0px;
    bottom: 0;
    background: var(--dark-one);
    -webkit-clip-path: polygon(
        40% 7.67949%,
        43.1596% 6.20615%,
        46.52704% 5.30384%,
        50% 5%,
        53.47296% 5.30384%,
        56.8404% 6.20615%,
        60% 7.67949%,
        81.65064% 20.17949%,
        84.50639% 22.17911%,
        86.97152% 24.64425%,
        88.97114000000001% 27.5%,
        90.44449% 30.6596%,
        91.34679% 34.02704%,
        91.65064% 37.5%,
        91.65064% 62.5%,
        91.34679% 65.97296%,
        90.44449% 69.3404%,
        88.97114000000001% 72.5%,
        86.97152% 75.35575%,
        84.50639% 77.82089000000001%,
        81.65064% 79.82051%,
        60% 92.32051%,
        56.8404% 93.79385000000001%,
        53.47296% 94.69616000000001%,
        50% 95%,
        46.52704% 94.69616000000001%,
        43.1596% 93.79385000000001%,
        40% 92.32051%,
        18.34936% 79.82051%,
        15.49361% 77.82089000000001%,
        13.02848% 75.35575%,
        11.02886% 72.5%,
        9.55551% 69.3404%,
        8.65321% 65.97296%,
        8.349360000000001% 62.5%,
        8.349360000000001% 37.5%,
        8.65321% 34.02704%,
        9.55551% 30.6596%,
        11.02886% 27.5%,
        13.02848% 24.64425%,
        15.49361% 22.17911%,
        18.34936% 20.17949%
    );
    clip-path: polygon(
        40% 7.67949%,
        43.1596% 6.20615%,
        46.52704% 5.30384%,
        50% 5%,
        53.47296% 5.30384%,
        56.8404% 6.20615%,
        60% 7.67949%,
        81.65064% 20.17949%,
        84.50639% 22.17911%,
        86.97152% 24.64425%,
        88.97114000000001% 27.5%,
        90.44449% 30.6596%,
        91.34679% 34.02704%,
        91.65064% 37.5%,
        91.65064% 62.5%,
        91.34679% 65.97296%,
        90.44449% 69.3404%,
        88.97114000000001% 72.5%,
        86.97152% 75.35575%,
        84.50639% 77.82089000000001%,
        81.65064% 79.82051%,
        60% 92.32051%,
        56.8404% 93.79385000000001%,
        53.47296% 94.69616000000001%,
        50% 95%,
        46.52704% 94.69616000000001%,
        43.1596% 93.79385000000001%,
        40% 92.32051%,
        18.34936% 79.82051%,
        15.49361% 77.82089000000001%,
        13.02848% 75.35575%,
        11.02886% 72.5%,
        9.55551% 69.3404%,
        8.65321% 65.97296%,
        8.349360000000001% 62.5%,
        8.349360000000001% 37.5%,
        8.65321% 34.02704%,
        9.55551% 30.6596%,
        11.02886% 27.5%,
        13.02848% 24.64425%,
        15.49361% 22.17911%,
        18.34936% 20.17949%
    );
}
.avatar_hex_info::before {
    content: "A";
    font-weight: bold;
    font-size: 7px;
    padding-top: 2px;
    display: block;
    position: relative;
    left: 2px;
    height: 12px;
    width: 14px;
    background: #e6404c;
    color: var(--text-color-white-more);
    background-size: cover;
    background-position: center;
    -webkit-clip-path: polygon(
        40% 7.67949%,
        43.1596% 6.20615%,
        46.52704% 5.30384%,
        50% 5%,
        53.47296% 5.30384%,
        56.8404% 6.20615%,
        60% 7.67949%,
        81.65064% 20.17949%,
        84.50639% 22.17911%,
        86.97152% 24.64425%,
        88.97114000000001% 27.5%,
        90.44449% 30.6596%,
        91.34679% 34.02704%,
        91.65064% 37.5%,
        91.65064% 62.5%,
        91.34679% 65.97296%,
        90.44449% 69.3404%,
        88.97114000000001% 72.5%,
        86.97152% 75.35575%,
        84.50639% 77.82089000000001%,
        81.65064% 79.82051%,
        60% 92.32051%,
        56.8404% 93.79385000000001%,
        53.47296% 94.69616000000001%,
        50% 95%,
        46.52704% 94.69616000000001%,
        43.1596% 93.79385000000001%,
        40% 92.32051%,
        18.34936% 79.82051%,
        15.49361% 77.82089000000001%,
        13.02848% 75.35575%,
        11.02886% 72.5%,
        9.55551% 69.3404%,
        8.65321% 65.97296%,
        8.349360000000001% 62.5%,
        8.349360000000001% 37.5%,
        8.65321% 34.02704%,
        9.55551% 30.6596%,
        11.02886% 27.5%,
        13.02848% 24.64425%,
        15.49361% 22.17911%,
        18.34936% 20.17949%
    );
    clip-path: polygon(
        40% 7.67949%,
        43.1596% 6.20615%,
        46.52704% 5.30384%,
        50% 5%,
        53.47296% 5.30384%,
        56.8404% 6.20615%,
        60% 7.67949%,
        81.65064% 20.17949%,
        84.50639% 22.17911%,
        86.97152% 24.64425%,
        88.97114000000001% 27.5%,
        90.44449% 30.6596%,
        91.34679% 34.02704%,
        91.65064% 37.5%,
        91.65064% 62.5%,
        91.34679% 65.97296%,
        90.44449% 69.3404%,
        88.97114000000001% 72.5%,
        86.97152% 75.35575%,
        84.50639% 77.82089000000001%,
        81.65064% 79.82051%,
        60% 92.32051%,
        56.8404% 93.79385000000001%,
        53.47296% 94.69616000000001%,
        50% 95%,
        46.52704% 94.69616000000001%,
        43.1596% 93.79385000000001%,
        40% 92.32051%,
        18.34936% 79.82051%,
        15.49361% 77.82089000000001%,
        13.02848% 75.35575%,
        11.02886% 72.5%,
        9.55551% 69.3404%,
        8.65321% 65.97296%,
        8.349360000000001% 62.5%,
        8.349360000000001% 37.5%,
        8.65321% 34.02704%,
        9.55551% 30.6596%,
        11.02886% 27.5%,
        13.02848% 24.64425%,
        15.49361% 22.17911%,
        18.34936% 20.17949%
    );
}

:root {
    --main-front-color: orange;
    --dark-one: #1f2535;
    --dark-two: #31394a;
    --dark-three: #232a3d;
    --text-color: #9ba5c0;
    --text-color-white: #eee;
    --text-color-white-more: #fff;
    --button-bg: #ffb327;
}
 
Last edited:
  • Tags
    add tilt transition to user avatars transition
  • Top