CSS3动画-两个问题

Question

这是我似乎无法弄清楚的一些问题。

1. 当您将鼠标悬停在图像上时，我正在设置几种样式的动画，但是如您所见，当边框大小增加时，其他所有内容也会随之移动。

2. 当您将边文字更改为更长或更短的内容时，它决定移动位置。

请有人能解释我在做什么错吗？

 /* Colors: #FF0F00 = red #FFFF04 = yellow #387F23 = green */ * { box-sizing: border-box; } body { margin: 0; background-color: yellow; font-family: Arial, Helvetica, sans-serif; } .animate { animation-fill-mode: forwards; animation-duration: 1s; } .one { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; } .two { -webkit-animation-delay: 1.7s; -moz-animation-delay: 1.7s; animation-delay: 1.7s; } .three { -webkit-animation-delay: 2.3s; -moz-animation-delay: 2.3s; animation-delay: 2.3s; } .four { -webkit-animation-delay: 3.3s; -moz-animation-delay: 3.3s; animation-delay: 3.3s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } /* FADE IN RIGHT */ @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } .container { margin-left: auto; margin-right: auto; width: 100%; } .hero__img img { max-width: 100%; vertical-align: middle; } .hero__center:after { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; background-color: red; /* z-index: -1; */ opacity: 0; transition: opacity 0.4s ease-in; } @media (min-width: 920px) { .hero { margin: 0 auto; width: 700px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; } .hero__heading { position: absolute; font-size: 80px; color: #0004f3; text-transform: uppercase; font-weight: bold; font-kerning: -3px; letter-spacing: 4px; z-index: 1; } .hero__heading--top { left: -85px; top: -150px; opacity: 1; } .hero__heading--bottom { right: -85px; bottom: -150px; opacity: 1; } .hero__center { position: relative; border: 5px solid blue; transition: border 0.4s ease-in; } .hero__center:hover { border: 10px solid #387F23; transition: border 0.4s ease-in; } .hero__center:hover:after { opacity: 0.4; transition: opacity 0.4s ease-in; } .hero__center:hover .hero__sideText { color: red; transition: color 0.4s ease-in; } .hero__img img { opacity: 1; transition: opacity 0.4s ease-in; } /* .hero__img:hover img { opacity: 0.4; transition: opacity 0.4s ease-in; } */ /* .hero__center:hover { border: 5px solid green; transition: border 0.5s; } */ .hero__sideText { position: absolute; top: 50%; color: #0004f3; transition: color 0.4s ease-in; } .hero__side--left { left: -50px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); transform-origin: center center; } .hero__side--right { right: -50px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); transform-origin: center center; } } 

 <div class="container"> <div class="hero animate fadeIn one"> <div class="hero__center"> <span class="hero__heading hero__heading--top animate fadeInLeft one">Lorem</span> <span class="hero__heading hero__heading--bottom animate fadeInRight one">Ipsum</span> <div class="hero__img"> <img src="http://via.placeholder.com/980x550" alt=""> </div> <span class="hero__sideText hero__side--left">Side text</span> <span class="hero__sideText hero__side--right">Side text</span> </div> </div> </div> 

Answer 1

1. 由于框的大小会通过更改边框宽度而变化，因此元素也会更改其位置。

尝试添加：

.hero__center:hover {
        margin:-5px;
}

应对边界变化。

2.变换旋转将元素的中心点用作其原点（tr​​ansform-origin：中心中心；）。 当增加字符时，将增加宽度，以便旋转选择的原点也随之移动。

要更改此位置，必须将该点固定到特定位置。 尝试使用以下css在sideText范围周围添加div包装器：

.wrapper-left {
  position:relative;
  left: -50%;
}

.wrapper-right {
  position:relative;
  left: 50%;
}