Нежелательное небольшое движение элемента после перехода / анимации в CSS - PullRequest
Новая
       3

Нежелательное небольшое движение элемента после перехода / анимации в CSS

0 голосов
/ 28 декабря 2018

У меня есть элемент абсолютной позиции в CSS, который содержит абсолютную позицию буксировки в качестве передней стороны элемента и задней стороны элемента, у каждого из которых есть спина backface-visibility: hidden;, когда я наведу указатель на родительский элемент, передняя сторона исчезнет, ​​а обратная сторонасторона появляется.На обратной стороне у меня есть кнопка (обратите внимание: проблема здесь->) после полного вращения по оси Y кнопка немного смещается вниз.Как я могу это исправить?это код: (обратите внимание, что над каждым персидским текстом есть иконка-шрифт (linea-font), я не знаю, как мне добавить его здесь, а кнопка слева.): 

@keyframes moveInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20rem);
    }
    90% {
        transform: translateX(2rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

*, *::after, *:before {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}

:root {
    font-size: 62.5%;
}

body {
    padding: 3rem;
    box-sizing: border-box;
}

body {
    font-family: "Vazir", serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #777;
}

.paragraph {
    font-size: 1.6rem;
}

.paragraph:not(:last-child) {
    margin-bottom: 30px;
}

.u-center-text {
    text-align: center;
}

.u-mb-1 {
    margin-bottom: 1rem !important;
}

.u-mb-2 {
    margin-bottom: 2rem !important;
}

.u-mb-3 {
    margin-bottom: 3rem !important;
}

.u-mb-4 {
    margin-bottom: 4rem !important;
}

.u-mb-5 {
    margin-bottom: 5rem !important;
}

.u-mb-6 {
    margin-bottom: 6rem !important;
}

.u-mb-7 {
    margin-bottom: 7rem !important;
}

.u-mb-8 {
    margin-bottom: 8rem !important;
}

.u-mb-9 {
    margin-bottom: 9rem !important;
}

.u-mb-10 {
    margin-bottom: 10rem !important;
}

.u-mt-1 {
    margin-top: 1rem !important;
}

.u-mt-2 {
    margin-top: 2rem !important;
}

.u-mt-3 {
    margin-top: 3rem !important;
}

.u-mt-4 {
    margin-top: 4rem !important;
}

.u-mt-5 {
    margin-top: 5rem !important;
}

.u-mt-6 {
    margin-top: 6rem !important;
}

.u-mt-7 {
    margin-top: 7rem !important;
}

.u-mt-8 {
    margin-top: 8rem !important;
}

.u-mt-9 {
    margin-top: 9rem !important;
}

.u-mt-10 {
    margin-top: 10rem !important;
}

.power-circles {
    position: relative;
    width: 100%;
    height: 100vh;
}

.power-circle {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    perspective: 150rem;
    -moz-perspective: 150rem;
}

.power-circle__inside {
    box-shadow: 0 0 3rem 1rem rgba(61, 61, 61, 0.2);
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    transition: all 1.5s;
}

.power-circle__inside--front {
    transform: translate(-50%, -50%);
}

.power-circle__inside--back {
    transform: translate(-50%, -50%) rotateY(-180deg);
}

.power-circle:hover {
    cursor: pointer;
}

.power-circle:hover .power-circle__inside--front {
    transform: translate(-50%, -50%) rotateY(-180deg);
    transition: all 1.5s;
}

.power-circle:hover .power-circle__inside--back {
    transform: translate(-50%, -50%) rotateY(0deg);
    transition: all 1.5s;
}

.power-circle--main {
    top: 50%;
    left: 50%;
    width: 20rem;
    height: 20rem;
    background: #fff;
    box-shadow: 0 0 3rem 1rem rgba(61, 61, 61, 0.2);
}

.power-circle--small {
    width: 13rem;
    height: 13rem;
}

.power-circle--small-1 {
    top: 50%;
    left: 37%;
}

.power-circle--small-2 {
    top: 25%;
    left: 50%;
}

.power-circle--small-3 {
    top: 50%;
    left: 63%;
}

.power-circle--small-4 {
    top: 75%;
    left: 50%;
}

.power-circle__icon {
    margin-top: .7rem;
    font-weight: bold;
    background: linear-gradient(to right bottom, #12c2e9, #c471ed, #f64f59);
    -webkit-background-clip: text;
    color: transparent;
}

.power-circle__icon--main {
    font-size: 6rem;
}

.power-circle__icon--small {
    font-size: 4rem;
}

.power-circle__fa-text--main {
    font-size: 1.6rem;
    margin-top: -3rem;
}

.power-circle__fa-text--small {
    font-size: 1rem;
    margin-top: -2.5rem;
}

.power-circle__en-text {
    text-transform: uppercase;
}

.power-circle__en-text--main {
    font-size: 1.4rem;
    margin-top: 3rem;
}

.power-circle__en-text--small {
    font-size: 1.2rem;
    margin-top: 2rem;
}

.btn:link, .btn:visited {
    color: #3d3d3d;
    text-decoration: none;
    font-size: 1.6rem;
    text-align: center;
    display: inline-block;
}

.btn--power-circle {
    border-radius: 50%;
    background: white;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3rem 0.2rem rgba(61, 61, 61, 0.5);
    line-height: 6.6rem;
    font-weight: 700;
}

.btn--power-circle:hover {
    box-shadow: 0 0 3rem 1rem rgba(61, 61, 61, 0.5);
}

.row {
    max-width: 114rem;
    margin: 0 auto 8rem auto;
}

.row::after {
    content: '';
    display: table;
    clear: both;
}

.row [class^="col-"] {
    float: left;
}

.row [class^="col-"]:not(:last-child) {
    margin-right: 6rem;
}

.row:last-child {
    margin-bottom: 0;
}

.row .col-1-of-2 {
    width: calc((100% - 6rem) / 2);
}

.row .col-1-of-3 {
    width: calc((100% - 2 * 6rem) / 3);
}

.row .col-2-of-3 {
    width: calc(((100% - 2 * 6rem) / 3) * 2 + 6rem);
}

.row .col-1-of-4 {
    width: calc((100% - 3 * 6rem) / 4);
}

.row .col-2-of-4 {
    width: calc(((100% - 3 * 6rem) / 4) * 2 + 6rem);
}

.row .col-3-of-4 {
    width: calc(((100% - 3 * 6rem) / 4) * 3 + 2 * 6rem);
}

body {
    padding: 0 !important;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right bottom, #12c2e9, #c471ed, #f64f59);
}
<!doctype html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icon-font-arrow.css">
    <link rel="stylesheet" href="css/icon-font.css">
    <title>خانواده وب | WEB-FAMILY.IR</title>
</head>
<body>
<header></header>
<main>
    <div class="power-circles u-center-text">
        <div class="power-circle power-circle--main">
            <div class="power-circle__icon power-circle__icon--main">
                <i class="icon-basic-world"></i>
            </div>
            <div class="power-circle__fa-text power-circle__fa-text--main">
                <h1>خانواده وب</h1>
            </div>
            <div class="power-circle__en-text power-circle__en-text--main">
                web-family.ir
            </div>
        </div>
        <div class="power-circle power-circle--small power-circle--small-1">
            <div class="power-circle__inside power-circle__inside--front">
                <div class="power-circle__icon power-circle__icon--small">
                    <i class="icon-basic-video"></i>
                </div>
                <div class="power-circle__fa-text power-circle__fa-text--small">
                    <h1>دوره ها</h1>
                </div>
                <div class="power-circle__en-text power-circle__en-text--small">
                    Courses
                </div>
            </div>
            <div class="power-circle__inside power-circle__inside--back">
                <a href="#" class="btn btn--power-circle"><span>ادامه</span></a>
            </div>
        </div>
        <div class="power-circle power-circle--small power-circle--small-2">
            <div class="power-circle__inside power-circle__inside--front">
                <div class="power-circle__icon power-circle__icon--small">
                    <i class="icon-basic-video"></i>
                </div>
                <div class="power-circle__fa-text power-circle__fa-text--small">
                    <h1>دوره ها</h1>
                </div>
                <div class="power-circle__en-text power-circle__en-text--small">
                    Courses
                </div>
            </div>
            <div class="power-circle__inside power-circle__inside--back"></div>
        </div>
        <div class="power-circle power-circle--small power-circle--small-3">
            <div class="power-circle__inside power-circle__inside--front">
                <div class="power-circle__icon power-circle__icon--small">
                    <i class="icon-basic-download"></i>
                </div>
                <div class="power-circle__fa-text power-circle__fa-text--small">
                    <h1>دانلود ها</h1>
                </div>
                <div class="power-circle__en-text power-circle__en-text--small">
                    Downloads
                </div>
            </div>
            <div class="power-circle__inside power-circle__inside--back"></div>
        </div>
        <div class="power-circle power-circle--small power-circle--small-4">
            <div class="power-circle__inside power-circle__inside--front">
                <div class="power-circle__icon power-circle__icon--small">
                    <i class="icon-basic-message-multiple"></i>
                </div>
                <div class="power-circle__fa-text power-circle__fa-text--small">
                    <h1>پرسش و پاسخ</h1>
                </div>
                <div class="power-circle__en-text power-circle__en-text--small">
                    Q & A
                </div>
            </div>
            <div class="power-circle__inside power-circle__inside--back"></div>
        </div>
    </div>
</main>
<footer></footer>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...