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 小部件

javascript - 变换 div 并移动滚动位置？ .scrollTop、.css 变换
我正在寻找一种简单的解决方案来将对象从一个地方移动和缩放到另一个地方。我做了一个JSfiddle用这个代码。问题是我需要它在某个时刻停止变小。所以它有一个最小尺寸，另一个问题是我希望它既缩小又向左移
css - 3D CSS 变换 - 变换 :rotateX(180deg);
我正在尝试通过沿 x 轴上下翻转(180 度)来为悬停时的图像设置动画。就像here 除非我出于某种原因无法让它工作。 img { transition:all 2s ease-in-out
math - 帮我解决刚体物理/变换
我想实例化一个 slider 约束，它允许 body 在 A 点和 B 点之间滑动。为了实例化约束，我指定了两个物体进行约束，在这种情况下，一个动态物体被约束到静态世界，比如滑动门。第三个和第四个
jQuery 旋转/变换
我想使用此功能旋转然后停止在特定点或角度。现在该元素只是旋转而不停止。代码如下: $(function() { var $elie = $("#bkgimg");
iphone - CATransform3D 变换
我正在尝试使用 CATransform3D 向 View 添加透视图。目前，这就是我得到的: 这就是我想要得到的: 我很难做到这一点。我完全迷失在这里。这是我的代码: CATransform3D t
java - 变换+缩放一组点
我编写了一个图形用户界面，用户可以在其中在 (640x480) 窗口中绘制内容。它使该绘图成为一组存储在 Vector 数组中的点。现在，我如何将这些点集平移到原点(0,0 窗口左上角)或将其放在指
html - 变换/缩放不适本地缩放固定的背景附件
我的应用程序中有两张图像相互叠加，分别表示为 foreground 和 background。对于这两个，我都使用 background-attachment: fixed 来确保图像始终彼此完全相同
html - 变换:旋转模糊图像
如何在不损失质量的情况下应用旋转变换？我试过添加 translateZ(0) 但它无济于事。这是例子: svg { background-color: rgb(93, 193, 93); }
css - 变换:尺度问题
我有一个 div，我试图在悬停时缩放它(只是 Y)。问题是它在没有过渡的情况下运行良好。当我使用过渡时，div 在顶部缩放一点然后下降，检查 fiddle 。问题是如何防止 div 那样缩放？我希望它
css - 变换:缩放裁剪
我正在尝试使用 transform: scale 图像网格 http://movies.themodern-nerd.com/genre .从左向右滚动时它工作正常，悬停的图像将停留在其他图像之上，但
CSS3 变换、倾斜和旋转
我正在查看 CSS3 Transform 并且想要一个既倾斜又旋转的盒子。我试过使用: transform:rotate(80deg); -moz-transform:rotate(80deg);
javascript - 变换 - 鼠标在父对象上移动时图像的原点
当用户在图像父元素上执行 mousemove 时，我试图在 img 上添加平滑移动效果(此处为 .carousel-img)但我无法正常运行它。我做错了什么？ $('.carousel-img').
javascript - 变换:缩放垂直对齐的元素
我有 div 元素在其他 div 元素中垂直对齐。我使用以下方法对齐它们:position: relative;变换:翻译Y(-50%)；顶部:50%。这很好用。我现在想缩放元素(使用 jQuer
CSS Matrix3D 变换
我在这个 fiddle 中使用 RotateX 后创建了 3D 效果: http://jsfiddle.net/vEWEL/11/ 但是，我不确定如何在这个 Fiddle 中的红色方 block 上实
image - 变换:缩放与传统调整大小
使用 transform: scale(x.x) 而不是使用 width 和 height 属性进行传统的调整大小有什么缺点吗？缩放会产生质量较低的图像或其他什么吗？最佳答案 Scale 生成总体上
c++ - OpenGL 变换
我在一个点上有一个对象，比如相对于原点的 x、y、z。我想对点应用一些变换，比如旋转和平移，并在变换后的点渲染对象。我正在使用 glTranslatef() 和 glRotatef() 函数。它看起
css - 变换 :before or :after item
有没有办法将转换应用到插入了 :before 的元素上？以下方法无效，但我愿意接受其他解决方案。 .itemclass:before { content: "➨"; transform:
调整元素大小的 CSS 变换
我找到了这个:width/height after transform 和其他几个，但没有什么不是我正在寻找的。我想要的是将某些东西缩放到其大小的 50%(当然还有漂亮的动画过渡)并让页面布局重新调整
javascript - 使用缓动曲线的 Css 变换
我想使用变换为元素位置设置动画。我怎么能在这个翻译中添加一些曲线(没什么特别的，只是不是一条完整的直线)？对于 jquery，我会使用效果很好的 easeInSine。 var a = documen
graphics - 变换 Direct3D 网格
我试着写一个 TransformMesh功能。该函数接受一个 Mesh对象和 Matrix目的。这个想法是使用矩阵来转换网格。为此，我锁定了顶点缓冲区，并在每个顶点上调用了 Vector3::Tran

首页

博学

6Ren·AI

商城

css - 变换 rotateX/rotateY