个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试使用 CSS 过渡使图像旋转。我有一个 transition: 2s transform linear; 和 transform: rotateY(720deg);。
您可以在这个 JSFiddle 中看到一次尝试.
CSS
h1 {
font-size: 0px;
transition: 10s font-size;
transition: 2000s transform linear;
}
div {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
HTML
<body background>
<div><img id="text" src="http://raritea.com/raritea/images/logo.ico"/></div>
</body>
JS
var init = function(){
document.getElementById('text').style.transform = 'rotateY(360000deg)';
}
最佳答案
这完全是在摸黑，但正如这些问题的常见情况一样，您可能没有此 transition 的初始状态。去工作。
将类似这样的内容添加到您的非转换状态:
.my-non-transitioned-state {
transform: rotateY(0deg);
transition: transform 2s linear;
}
.my-transitioned-state {
transform: rotateY(270deg);
}
它应该可以工作。 transition是一个数学计算的标签，需要两个数值才能工作。因此，如果你只给它一个状态，它就不能转换。或者，如果您给它一个非数字状态(例如 background-size: cover )，它将不起作用。
确保您的 transition具有初始和目标状态，这应该有效。
因此，当您通过 JavaScript 添加这些样式时，还需要考虑一件事。
页面呈现的操作顺序:
super 简化的页面渲染操作顺序:
<head> 中的脚本跑<body> 末尾的脚本跑添加setTimeout (即使时间为 0)将您的 JS 调用从第 1 步弹出到第 5 步，这就是 fiddle 起作用的原因。
关于html - 我可以在图像上设置 rotateY() 动画吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28907925/
25
4
0
我可以 transform: rotateY 一个 div 来对抗他父级的 transform: rotateY 吗？ 例如: 如果我有一个带有rotateY(-45deg)的父div，他的所有 ch
$("#div").css("transform", "rotateY("+ '+='+90 +"deg)"); 我想增加rotateY，但我的语法不好，可以修复吗？ 最佳答案 最简单的方法是将当前旋
http://jsfiddle.net/DaE3V/ 刚开始学习css动画... 我想做一个 transform: rotateY(180deg); 但我不只是旋转，而是想翻转它，有点像书的一页...
您好，我已经更改了 w3schools 的翻转卡元素，并添加了 javascript，如果它们位于视口(viewport)中，并且用户可以理解卡后面有文本，它们将旋转 60px。它在滚动上运行良好，但
一定有某种属性影响我的代码，我无法弄清楚，因为当我制作 JSfiddle 时，一切都很好。 问题:我正在尝试对由 :hover 伪元素触发的三个 div 进行 Y 轴转换。出于某种原因，div 不会停
代码: http://jsfiddle.net/qhoc/8gg7gkqv/ 我希望红色表面平放在灰色表面之上。但是当我旋转 modifier1 时，您可以看到两个表面之间的距离(标记为??)。如何摆
我想在 transformY(-180deg) 动画期间将 div.box 的左边缘保持在同一位置。我不明白为什么它会移动。这是代码: transform-origin: 0% 0%; transfo
当我悬停一次时，过渡是正确的，但第二次时，过渡变得很奇怪，好像透视:800px 在过渡发生后开始工作。还请告诉我如何设置围绕除中心以外的边缘的旋转。我知道 transform-origin 但不知道
这是我的代码的 fiddle - https://jsfiddle.net/agon024/o9sa7nyh/5/ :hover{ transform: perspective(800px) ro
请试试这个DEMO 我遇到了无法使用背面链接的问题。 有人能帮忙吗？ 它适用于 FF，但在 Crome 中不起作用。 这是我从 http://www.asuum.com 得到想法的页面 $("a.im
我是 CSS3 的新手，为了学习它，我正在使用 CSS3d transform: rotateY 属性轻松地将按钮旋转 180 度 transition。但由于 180 翻转，单词显示为相反。可以做什
我使用 css 3D-transform rotateY 翻转带有 css transition 的 div。我希望图像翻转一定次数:当转换结束时，我再次触发它直到达到某个计数器值。 我想做什么:当
我想旋转图像，然后看到了这个视频 https://www.youtube.com/watch?v=nD8xqlh6Esk这提供了一种非常简单的方法来在点击时旋转一个 div。我认为这是在页面加载时使用
我正在研究 jQuery 和 CSS3 动画，发现发生了一些奇怪的事情。在我的笔上，当您将鼠标悬停在卡片上或专注于 CCV 字段时，当卡片翻转时，颜色需要一秒钟才能透出。它几乎看起来像它的加载。有人知
我正在寻找一种简单的方法来获取对象并转换其 rotateY 属性，而无需将其设置为预设过渡动画。 This will help me complete this slide show (只能在 Chr
Chrome 版本 39.0.2148.0 我正在尝试在每侧使用 2 张不同的图片来实现翻转图像效果。最初的想法源于http://themestrong.com/demo/argo_wp/ (我也看到
来自 MDN 的一些文本 rotateY() 创建的旋转量由 .如果为正，则运动将顺时针；如果为负数，则为逆时针方向。 const rotate1 = [ { transform: `ro
我正在尝试使用 CSS 过渡使图像旋转。我有一个 transition: 2s transform linear; 和 transform: rotateY(720deg);。 您可以在这个 JSFi
我旋转了一个带有文本的元素并对其进行了透视 3D 处理。文字真的是低保真度。有什么办法可以改善吗？ 非常简单的示例代码: This is text http://codepen.io/an
在我的网页上有一个 div。在那个 div 上，我有模拟 div 被翻转(翻转)的“动画”。 Some content 我用 jQuery plugin tra
我是一名优秀的程序员,十分优秀！