javascript - 使用 css 过渡从屏幕平移时如何消除反弹效果？-6ren

javascript - 使用 css 过渡从屏幕平移时如何消除反弹效果？

转载作者：行者123 更新时间：2023-12-01 15:15:32

如果没有视觉示例，很难用语言解释我在寻找什么，所以这是基本思想:
https://codepen.io/jwiggiff/full/xxwvVbr

var cube = $('.cube');
var wrapper = $('.wrapper');

$(document).mousemove((e) => {
  if(!cube.hasClass('locked')) {
    var deltaX = e.pageX - (wrapper.offset().left+(wrapper.width()/2));
    var deltaY = e.pageY - (wrapper.offset().top+(wrapper.height()/2));
    var rotateY = deltaX/($(document).width()/2) * 90;
    var rotateX = deltaY/(($(document).height()/2)) * -90;
    cube.css("transform", " rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)");
  }
});

$('.top-label').click((e) => {
  cube.toggleClass('locked locked-bottom');
  $('.labels div:not(.top-label)').fadeToggle();
});
$('.bottom-label').click((e) => {
  cube.toggleClass('locked locked-top');
  $('.labels div:not(.bottom-label)').fadeToggle();
});
$('.left-label').click((e) => {
  cube.toggleClass('locked locked-right');
  $('.labels div:not(.left-label)').fadeToggle();
});
$('.right-label').click((e) => {
  cube.toggleClass('locked locked-left');
  $('.labels div:not(.right-label)').fadeToggle();
});

/* Variables */
:root {
  --cube-scale: 60vh;
}


/* Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
}

.cube div {
  padding: 10vh;
  border: 5px solid blue;
  transition: all 500ms ease-in-out;
}

.cube div h1 {
  font-family: "Carter One", cursive;
}

.cube div p {
  font-size: 14px;
}


/* Labels */
.labels {
  color: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.labels div {
  transition: all 500ms ease-in-out;
}

.left-label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  padding: 20px 10px;
}

.right-label {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  padding: 20px 10px;
}

.top-label {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, 0);
  padding: 10px 20px;
}

.bottom-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, 0);
  padding: 10px 20px;
}


/* 3D Cube */
.wrapper {
  width: var(--cube-scale);
  height: var(--cube-scale);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: calc(var(--cube-scale)*4);
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.cube.locked.locked-bottom {
  transition: all 500ms ease-in-out;
  transform: rotateX(90deg) translateY(calc(var(--cube-scale) / -2)) !important;
}
.locked-bottom .bottom {
  height: 100vh;
  width: 100vw;
  transform: rotateX(-90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

.cube.locked.locked-top {
  transition: all 500ms ease-in-out;
  transform: rotateX(-90deg) translateY(calc(var(--cube-scale) / 2)) !important;
}
.locked-top .top {
  height: 100vh;
  width: 100vw;
  transform: rotateX(90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

.cube.locked.locked-right {
  transition: all 500ms ease-in-out;
  transform: rotateY(-90deg) translateX(calc(var(--cube-scale) / -2)) !important;
}
.locked-right .right {
  height: 100vh;
  width: 100vw;
  transform: rotateY(90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

.cube.locked.locked-left {
  transition: all 500ms ease-in-out;
  transform: rotateY(90deg) translateX(calc(var(--cube-scale) / 2)) !important;
}
.locked-left .left {
  height: 100vh;
  width: 100vw;
  transform: rotateY(-90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

.cube div {
  transform-origin: calc(var(--cube-scale)/2) calc(var(--cube-scale)/2);
	position: absolute;
	width: var(--cube-scale);
	height: var(--cube-scale);
}

.front {
  background: rgba(255,0,0,0.7);
  transform: rotateY(0deg) translateZ(calc(var(--cube-scale) / 2));
}

.right {
  background-color: rgba(0,255,0,0.7);
  transform: rotateY(90deg) translateZ(calc(var(--cube-scale) / 2));
}

.back {
  background-color: rgba(0,0,255,0.7);
  transform: rotateY(180deg) translateZ(calc(var(--cube-scale) / 2));
}

.left {
  background-color: rgba(255,165,0,0.7);
  transform: rotateY(-90deg) translateZ(calc(var(--cube-scale) / 2));
}

.top {
  background-color: rgba(128,0,128,0.7);
  transform: rotateX(90deg) translateZ(calc(var(--cube-scale) / 2));
}

.bottom {
  background-color: rgba(255,0,255,0.7);
  transform: rotateX(-90deg) translateZ(calc(var(--cube-scale) / 2));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>
<div class="labels">
  <div class="left-label"><span>Right</span></div>
  <div class="right-label"><span>Left</span></div>
  <div class="top-label"><span>Bottom</span></div>
  <div class="bottom-label"><span>Top</span></div>
</div>

在 codepen 中，如果您单击屏幕边缘的文本，它会移动当前面以覆盖整个窗口。当您单击左侧或右侧文本时，它具有预期的结果。但是，如果单击顶部或底部的文本，您会看到立方体在远离屏幕平移时有一点弧度，而左/右的则没有。任何关于导致此反弹/弧线的原因以及如何解决它的想法将不胜感激!

最佳答案

添加 rotateY(0)至.cube.locked.locked-bottom和 .cube.locked.locked-top以避免这个问题。

这有点棘手，但这是因为您正在使用 rotateY(a) rotateX(b) 应用动态转换。这不会以相同的方式过渡到 rotateX() translateZ()和 rotateY() translateZ() .如果您制作 rotateX() translateZ()等于 rotateY(0) rotateX() translateZ()您将有相同的过渡:

var cube = $('.cube');
var wrapper = $('.wrapper');

$(document).mousemove((e) => {
  if(!cube.hasClass('locked')) {
    var deltaX = e.pageX - (wrapper.offset().left+(wrapper.width()/2));
    var deltaY = e.pageY - (wrapper.offset().top+(wrapper.height()/2));
    var rotateY = deltaX/($(document).width()/2) * 90;
    var rotateX = deltaY/(($(document).height()/2)) * -90;
    cube.css("transform", " rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)");
  }
});

$('.top-label').click((e) => {
  cube.toggleClass('locked locked-bottom');
  $('.labels div:not(.top-label)').fadeToggle();
});
$('.bottom-label').click((e) => {
  cube.toggleClass('locked locked-top');
  $('.labels div:not(.bottom-label)').fadeToggle();
});
$('.left-label').click((e) => {
  cube.toggleClass('locked locked-right');
  $('.labels div:not(.left-label)').fadeToggle();
});
$('.right-label').click((e) => {
  cube.toggleClass('locked locked-left');
  $('.labels div:not(.right-label)').fadeToggle();
});

/* Variables */
:root {
  --cube-scale: 60vh;
}


/* Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
}

.cube div {
  padding: 10vh;
  border: 5px solid blue;
  transition: all 500ms ease-in-out;
}

.cube div h1 {
  font-family: "Carter One", cursive;
}

.cube div p {
  font-size: 14px;
}


/* Labels */
.labels {
  color: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.labels div {
  transition: all 500ms ease-in-out;
}

.left-label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  padding: 20px 10px;
}

.right-label {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  padding: 20px 10px;
}

.top-label {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, 0);
  padding: 10px 20px;
}

.bottom-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, 0);
  padding: 10px 20px;
}


/* 3D Cube */
.wrapper {
  width: var(--cube-scale);
  height: var(--cube-scale);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: calc(var(--cube-scale)*4);
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

/*here*/
.cube.locked.locked-bottom {
  transition: all 500ms ease-in-out;
  transform:rotateY(0) rotateX(90deg) translateY(calc(var(--cube-scale) / -2)) !important;
}
.locked-bottom .bottom {
  height: 100vh;
  width: 100vw;
  transform: rotateX(-90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

/* here */
.cube.locked.locked-top {
  transition: all 500ms ease-in-out;
  transform:rotateY(0) rotateX(-90deg) translateY(calc(var(--cube-scale) / 2)) !important;
}
.locked-top .top {
  height: 100vh;
  width: 100vw;
  transform:rotateY(0) rotateX(90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

.cube.locked.locked-right {
  transition: all 500ms ease-in-out;
  transform: rotateY(-90deg) translateX(calc(var(--cube-scale) / -2)) !important;
}
.locked-right .right {
  height: 100vh;
  width: 100vw;
  transform: rotateY(90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

.cube.locked.locked-left {
  transition: all 500ms ease-in-out;
  transform: rotateY(90deg) translateX(calc(var(--cube-scale) / 2)) !important;
}
.locked-left .left {
  height: 100vh;
  width: 100vw;
  transform: rotateY(-90deg) translateZ(calc(var(--cube-scale) / 2)) translate(calc(((100vw/2) - (var(--cube-scale)/2)) * -1), calc(((100vh/2) - (var(--cube-scale)/2)) * -1));
}

.cube div {
  transform-origin: calc(var(--cube-scale)/2) calc(var(--cube-scale)/2);
	position: absolute;
	width: var(--cube-scale);
	height: var(--cube-scale);
}

.front {
  background: rgba(255,0,0,0.7);
  transform: rotateY(0deg) translateZ(calc(var(--cube-scale) / 2));
}

.right {
  background-color: rgba(0,255,0,0.7);
  transform: rotateY(90deg) translateZ(calc(var(--cube-scale) / 2));
}

.back {
  background-color: rgba(0,0,255,0.7);
  transform: rotateY(180deg) translateZ(calc(var(--cube-scale) / 2));
}

.left {
  background-color: rgba(255,165,0,0.7);
  transform: rotateY(-90deg) translateZ(calc(var(--cube-scale) / 2));
}

.top {
  background-color: rgba(128,0,128,0.7);
  transform:  rotateX(90deg) translateZ(calc(var(--cube-scale) / 2));
}

.bottom {
  background-color: rgba(255,0,255,0.7);
  transform: rotateX(-90deg) translateZ(calc(var(--cube-scale) / 2));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>
<div class="labels">
  <div class="left-label"><span>Right</span></div>
  <div class="right-label"><span>Left</span></div>
  <div class="top-label"><span>Bottom</span></div>
  <div class="bottom-label"><span>Top</span></div>
</div>

获取有关如何在 transform 之间进行插值的更多详细信息的相关问题: Weird behavior when rotating an element on hover

关于javascript - 使用 css 过渡从屏幕平移时如何消除反弹效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62094617/

文章推荐： javascript - Angular 9 Google Maps API Place Autocomplete

文章推荐： javascript - 如何在 JavaScript 中查找 HTML 元素的位置？

文章推荐： java - Java中策略模式的简洁表达

javascript - 隐藏最大高度溢出的 CSS 过渡 "simulate"过渡
由于内容高度不同，我正在使用过渡最大高度而不是高度的技术，但我遇到了问题。在增长或收缩的元素内，我有一个溢出的绝对定位元素，我想在父元素展开时显示该元素。问题是如果我只在元素没有展开的时候设置ov
CSS 过渡
我正在用 CSS 制作一个表格，上面会有一些有趣的动画。单击文本字段时，它应该展开，但除此之外，它还应该使它旁边的按钮移动。谁能看到一个简单的方法来做到这一点？我在这里包含了代码: .inpu
CSS3 过渡
我想在将鼠标悬停在按钮/div 标记上时仅使用 CSS3 过渡更改页面的背景颜色。我希望颜色逐渐出现，因此想使用过渡效果，但我不知道如何将页面的背景颜色与 div 上的悬停事件相关联。有人可以帮我处理
CSS3 过渡
我这里有这个页面(进行中)http://kimwilddesigns.com/index_new.htm 在本节中，我希望能够将鼠标悬停在 li 上，使背景图像淡出并使 h2 淡入。这是否可以通过过渡
CSS3 - 过渡
我的 CSS 有点问题。我正在看一本书学习 CSS3，我刚刚发现了 Transition 函数。所以我决定尝试一下，我想不出我错在哪里，希望你能帮助我。这是我的 Index.html 文件
基于媒体查询的 CSS 过渡
我正在尝试使使用 background-image 设置的背景图像随着页面变窄而淡出。我很确定它可以使用 CSS 转换来完成，但我对它们相当不熟悉。我想我想问的是，你能根据媒体查询将背景图片转换出来吗
python - 背景中的多种颜色(过渡)
有没有办法在 PyQt 中将过渡颜色作为背景？我尝试使用 CSS 的线性渐变，但不起作用 stylesheet = ("QWidget { background-color : linear-grad
Javascript fadeIn() 过渡
我有这段代码，可以在一定的延迟后切换图像的不透明度: $(".pattern-overlay").css("background","black").delay(2000).queue(functio
jQuery html 过渡
我还在学习 jQuery，我现在想做的就是结合 html()带有过渡的方法(例如 hide() 和 show() )，以便更改具有过渡效果的 div 的 html。这是我尝试过的: $('div.co
jQuery div 过渡
我有一个链接列表和一些内容部分 ORANGE BLUE PINK GREEN gfgfgfgf gfgfgfgf gfgfgfgf gfgfgfgf 每个链接对应
javascript - 过渡/动画后CSS触发javascript
我不想从 JS 触发 CSS 动画，而是相反。如果我通过 -webkit-transition 或 transition: all 1000ms 类型的样式表做 CSS 动画，有没有办法在转换后触发
java - 如何在javafx中使用节点的宽度制作动画/过渡？
我想用节点的“宽度”制作动画。在本例中，我的节点是“AnchorPane”。我尝试在javafx中制作一个抽屉导航。没有属性“width Property()”？ new Key Value (
javascript - 为什么第一次设置属性时不应用动画(过渡)
这是一个简单的设置，其中使用 left 属性将盒子向右移动。通过单击按钮更新该属性。为什么我第一次点击按钮时没有应用过渡动画？ document.addEventListener('DOMConten
Android TextView 过渡
我是安卓开发的新手。我想创建一个带有两个 TextView 的启动画面。在此初始屏幕中，我想要两个转换 1) Text View 1 从顶部到中心的过渡2) text View 2 从底部到中心的过渡
Android fragment 过渡
我有三个 fragment ，F1、F2 和 F3。在 F1 到 F2 转换并返回到 F1 的情况下，不会调用 F1 的 onCreateView()。但在 F1 到 F3 转换并返回到 F1 的
带有扩展导航栏的 iOS 过渡
我正在为我的应用程序使用扩展导航栏，将其高度增加 30 点。为此，我对 UINavigationBar 进行了子类化，这是我的 CustomNavigationBar.m: CGFloat Custo
jquery - CSS 过渡
我在下面创建了 jQuery 脚本，但是在将它转换为最好仅使用过渡的 CSS 时遇到了一些问题。如果有人可以帮助我，我会很高兴。下面示例的解释: - 当你点击文本框时，一个空的 div 容器会掉下来
css - 隐藏背面可见性时取消图像变换/过渡
我有一个盒子，点击它会翻转。里面还有一张悬停时放大的图片，如图 fiddle 所示。 . 问题是当我将鼠标移出或放回时，隐藏的图像上的缩放过渡会短暂显示。 My attempt修复它: #box.fl
CSS 过渡，自行移动
div 自己移动，我什至不想要也没有编写代码的移动。这是我的问题: 我正在使用这样的 CSS 转换(想要移动背景图片): .mobile{ background: url(../img/galaxy
方向的 CSS 过渡
我知道如何进行淡入淡出的 CSS 过渡，但是否有解决方案可以从上到下淡出？这是我的代码 .navbar-default{ -webkit-transition: all 0.5s ease;

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 css 过渡从屏幕平移时如何消除反弹效果？