javascript - RotateY 过渡无法正常工作-6ren

javascript - RotateY 过渡无法正常工作

转载作者：搜寻专家更新时间：2023-10-31 08:25:33

26

4

当我悬停一次时，过渡是正确的，但第二次时，过渡变得很奇怪，好像透视:800px 在过渡发生后开始工作。还请告诉我如何设置围绕除中心以外的边缘的旋转。我知道 transform-origin 但不知道 transform-axis。

我希望当我将鼠标悬停在上时，这些图像应该像窗口一样打开。

var left=document.getElementById("left");
var right=document.getElementById("right");
function curtain() {
	left.style.transform="rotateY(70deg)";
	right.style.transform="rotateY(-70deg)";
}
function back() {
	left.style.transform="rotateY(0deg)";
	right.style.transform="rotateY(0deg)";
}

#animate{
    width: 400px;
	height: 300px;
	margin: auto;
	position: relative;
	perspective: 800px;
}
img {
	width: 100%;
}
#left {
	position:absolute;
	top: 0;
	right: 50%;
	padding: 0;
	margin: 0;
	width: 50%;
	transition: transform 0.5s;
}
#right {
	position: absolute;
	top: 0;
	right: 0%;
	padding: 0;
	margin: 0;
	width: 50%;
    transition: transform 0.5s;
}

<html>
    <head>
	    <link href="style/style.css" rel="stylesheet">
	</head>
	<body>
	    <div id="animate" onmouseover="curtain()" onmouseout="back()">
		    <div id="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"></div>
			<div id="right"><img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"></div>
		</div>
		<script src="script/script.js"></script>
	</body>
</html>

最佳答案

perspective 和 onmouseout 似乎有问题。 back()(在 onmouseout 中)和 curtain()(在 onmouseover 中)的调用非常不一致。 onmouseout 在鼠标移动到元素(在本例中为 #animate)或其子元素(图像)之外时被调用。 children 是动画的 - 他们移动 - 并且 onmouseout 被多次调用。

我不会为此推荐 onmouseover/onmouseout - 相反我会使用 CSS :hover。

除此之外，transform-origin 定义了旋转中心。

#animate:hover #left {
    transform: rotateY(70deg);
}

#animate:hover #right {
    transform: rotateY(-70deg);
}

#animate {
    width: 400px;
    height: 300px;
    margin: auto;
    position: relative;
    perspective: 800px;
}

img {
    width: 100%;
}

#left {
    position: absolute;
    top: 0;
    right: 50%;
    padding: 0;
    margin: 0;
    width: 50%;
    transition: transform 0.5s;
    transform-origin: left;
}

#right {
    position: absolute;
    top: 0;
    right: 0%;
    padding: 0;
    margin: 0;
    width: 50%;
    transition: transform 0.5s;
    transform-origin: right;
}

<div id = 'animate'>
    <div id = 'left'><img src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG'></div>
    <div id = 'right'><img src = 'http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png'></div>
</div>

关于javascript - RotateY 过渡无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37250947/

26

4

0

文章推荐： Java Netbeans : 'Package does not exist'

文章推荐： ios - 使用 CKReference 与 CKRecord 的 CloudKit 性能

文章推荐： swift - 如何找到 Mac App 的 Realm 文件位置

文章推荐： html - 使用本地主机应用程序的 iframe

CSS3 变换 : rotateY a div to counter the rotateY of the parent
我可以 transform: rotateY 一个 div 来对抗他父级的 transform: rotateY 吗？例如: 如果我有一个带有rotateY(-45deg)的父div，他的所有 ch
jquery 改变变换(rotateY)
$("#div").css("transform", "rotateY("+ '+='+90 +"deg)"); 我想增加rotateY，但我的语法不好，可以修复吗？最佳答案最简单的方法是将当前旋
css - 如何进行类似翻页的转换 : rotateY?
http://jsfiddle.net/DaE3V/ 刚开始学习css动画... 我想做一个 transform: rotateY(180deg); 但我不只是旋转，而是想翻转它，有点像书的一页...
javascript - 悬停效果不适用于变换 : rotateY
您好，我已经更改了 w3schools 的翻转卡元素，并添加了 javascript，如果它们位于视口(viewport)中，并且用户可以理解卡后面有文本，它们将旋转 60px。它在滚动上运行良好，但
html - RotateY 不会停止闪烁
一定有某种属性影响我的代码，我无法弄清楚，因为当我制作 JSfiddle 时，一切都很好。问题:我正在尝试对由 :hover 伪元素触发的三个 div 进行 Y 轴转换。出于某种原因，div 不会停
javascript - rotateY 时两个表面之间的距离
代码: http://jsfiddle.net/qhoc/8gg7gkqv/ 我希望红色表面平放在灰色表面之上。但是当我旋转 modifier1 时，您可以看到两个表面之间的距离(标记为??)。如何摆
css - rotateY 过渡的原点错位
我想在 transformY(-180deg) 动画期间将 div.box 的左边缘保持在同一位置。我不明白为什么它会移动。这是代码: transform-origin: 0% 0%; transfo
javascript - RotateY 过渡无法正常工作
当我悬停一次时，过渡是正确的，但第二次时，过渡变得很奇怪，好像透视:800px 在过渡发生后开始工作。还请告诉我如何设置围绕除中心以外的边缘的旋转。我知道 transform-origin 但不知道
javascript - jQuery - rotateY 取决于元素向右或向左悬停
这是我的代码的 fiddle - https://jsfiddle.net/agon024/o9sa7nyh/5/ :hover{ transform: perspective(800px) ro
css - CSS rotateY 和链接的问题
请试试这个DEMO 我遇到了无法使用背面链接的问题。有人能帮忙吗？它适用于 FF，但在 Crome 中不起作用。这是我从 http://www.asuum.com 得到想法的页面 $("a.im
html - 在进行转换时 - rotateY，单词会反转
我是 CSS3 的新手，为了学习它，我正在使用 CSS3d transform: rotateY 属性轻松地将按钮旋转 180 度 transition。但由于 180 翻转，单词显示为相反。可以做什
css - 在不进行变换的情况下重置 RotateY 度数
我使用 css 3D-transform rotateY 翻转带有 css transition 的 div。我希望图像翻转一定次数:当转换结束时，我再次触发它直到达到某个计数器值。我想做什么:当
css - 使用 rotateY 旋转图像
我想旋转图像，然后看到了这个视频 https://www.youtube.com/watch?v=nD8xqlh6Esk这提供了一种非常简单的方法来在点击时旋转一个 div。我认为这是在页面加载时使用
jquery - 使用 RotateY 缓慢加载卡片翻转
我正在研究 jQuery 和 CSS3 动画，发现发生了一些奇怪的事情。在我的笔上，当您将鼠标悬停在卡片上或专注于 CCV 字段时，当卡片翻转时，颜色需要一秒钟才能透出。它几乎看起来像它的加载。有人知
jquery - 没有应用过渡的 CSS3 rotateY
我正在寻找一种简单的方法来获取对象并转换其 rotateY 属性，而无需将其设置为预设过渡动画。 This will help me complete this slide show (只能在 Chr
css - 变换 rotateX/rotateY
Chrome 版本 39.0.2148.0 我正在尝试在每侧使用 2 张不同的图片来实现翻转图像效果。最初的想法源于http://themestrong.com/demo/argo_wp/ (我也看到
css - 带有 rotateY 的动画在不同值下看起来相同
来自 MDN 的一些文本 rotateY() 创建的旋转量由 .如果为正，则运动将顺时针；如果为负数，则为逆时针方向。 const rotate1 = [ { transform: `ro
html - 我可以在图像上设置 rotateY() 动画吗？
我正在尝试使用 CSS 过渡使图像旋转。我有一个 transition: 2s transform linear; 和 transform: rotateY(720deg);。您可以在这个 JSFi
html - rotateY() 文本模糊/像素化
我旋转了一个带有文本的元素并对其进行了透视 3D 处理。文字真的是低保真度。有什么办法可以改善吗？非常简单的示例代码: This is text http://codepen.io/an
javascript - rotateY(90deg)时如何让div不消失
在我的网页上有一个 div。在那个 div 上，我有模拟 div 被翻转(翻转)的“动画”。 Some content 我用 jQuery plugin tra

首页

博学

6Ren·AI

商城

javascript - RotateY 过渡无法正常工作