css - 变换 rotateX/rotateY-6ren

css - 变换 rotateX/rotateY

转载作者：行者123 更新时间：2023-11-28 08:52:09

26

4

Chrome 版本 39.0.2148.0

我正在尝试在每侧使用 2 张不同的图片来实现翻转图像效果。最初的想法源于http://themestrong.com/demo/argo_wp/ (我也看到了以下问题)在 Chrome 中，第一次翻转似乎有问题。背面图像在第 1 次旋转完全完成之前不显示，然后突然出现。第一次旋转后的每次旋转都很好。我在代码中做错了什么吗？

问题没有出现在 FF 中，这表明代码没问题，我对 Chrome 的态度不够好......

看这里的例子 http://jsfiddle.net/xj33uaph/2/

或在单个 HTML 文件中

<html>
    <head>
        <title></title>
        <style>
            #wrap > div  {
                position:relative
            }
            #wrap > div img {
                display:block;
                border:0;
                margin:0;
                padding:0;
                position:absolute;
                width:300px;
                height:300px
            }
            #wrap .flip img {
                backface-visibility: hidden;
            }
            #wrap > div {
                width:300px;
                height:300px
                background: none;
                perspective: 800px;
                transform-style: preserve-3d;
                transition: transform 1.5s;
            }
            #wrap div.flip .img2 {
              transform: rotateY(-180deg);
            }
            #wrap > div.active {
              transform: rotateY(-180deg);
            }            
            #wrap > div.active img{
                visibility:visible;
            }
        </style>
        <script type="text/javascript">
            jQuery(function($){ 
                setInterval(function(){
                    var imgs = $('#wrap > div:not(.active):has(div.flip)');
                    var imgs_act = $('#wrap > div.active');
                            $(imgs[0]).addClass('active');
                            $(imgs_act[0]).removeClass('active');
                },2000);
            });                        
        </script>
    </head>
    <body>
        <div id="wrap">
            <div class="">
                <div class="flip">
                <img src="https://farm8.staticflickr.com/7106/7849428998_eed76b378a_n.jpg" alt="img1" class="img2">
                <img src="https://farm9.staticflickr.com/8295/7871019630_2ba8536c98_n.jpg" alt="img2" class="img1">
                </div>
            </div>        
        </div> <!-- wrap -->           
    </body>
</html>

最佳答案

这是您重写的样本基 on* this .

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>derp</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      /* entire container, keeps perspective */
      .flip-container {
        perspective: 1000;
      }
      /* flip the pane when hovered */
      .flip-container:hover .flipper,
      .flip-container.hover .flipper {
        transform: rotateY(180deg);
      }
      .flip-container, .front, .back {
        width: 300px;
        height: 300px;
      }
      /* flip speed goes here */
      .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
      }
      /* hide back of pane during swap */
      .front, .back {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
      }
      /* front pane, placed above back */
      .front {
        z-index: 2;
        /* for firefox 31 */
        transform: rotateY(0deg);
      }
      /* back, initially hidden pane */
      .back {
        transform: rotateY(180deg);
      }
      .flip-container:hover .flipper,
      .flip-container.hover .flipper,
      .flip-container.flip .flipper {
        transform: rotateY(180deg);
      }
        </style>
  </head>
  <body>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      <div class="flipper">
        <div class="front">
          <img src="https://farm8.staticflickr.com/7106/7849428998_eed76b378a_n.jpg">
        </div>
        <div class="back">
          <img src="https://farm9.staticflickr.com/8295/7871019630_2ba8536c98_n.jpg">
        </div>
      </div>
    </div>
    <script type="text/javascript"> 
      window.setInterval(function(){
        document.getElementsByClassName("flip-container")[0].classList.toggle("flip");
      }, 2000);
    </script>
  </body>
</html>

*我所说的基于，是指复制和粘贴自。

关于css - 变换 rotateX/rotateY，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25810037/

26

4

0

文章推荐： jquery - 在 Windows Phone 8 上的 IE 10 上滚动时网页闪烁

文章推荐： css - 如何从PNG图像制作字体图标？

文章推荐： javascript - 表单中的多个 jqueryfileupload 小部件

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

商城

css - 变换 rotateX/rotateY