zoukankan      html  css  js  c++  java
  • 3D旋转动画

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>css3 3D广告</title>
        <script src="js/jquery.1.9.0.min.js"></script>
        <style>
            img {
            300px;
            height:200px;
            }
            section div {
                position:absolute;
                top:0px;
                left:0px;
                300px;
                height:200px;
            }
           
        </style>
    </head>
    <body>
    <div style="position:relative;margin:0 auto;300px;">
        <section>
           <!-- backface-visibility 属性可用于隐藏内容的背面。默认情况下,背面可见,
               这意味着即使在翻转后,变换的内容仍然可见。但当 backface-visibility
               设置为 hidden 时,旋转后内容将隐藏,因为旋转后正面将不再可见。-->

            <div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
                        -webkit-transform:rotate3d(0,1,0,180deg);">
                <a href="#">
                     <img src="images/di%20(1).jpg" />
                </a>
            </div>
            <div style="-webkit-transition:-webkit-transform 0.8s ease;-webkit-backface-visibility:hidden;
                        -webkit-transform:rotate3d(0,1,0,0deg);">
                <a href="#">
                    <img src="images/di%20(2).jpg" />
                </a>
            </div>
        </section>
    </div>
    </body>
    <script>
        var sign = 0;
        setInterval(function () {
            if (sign % 2 == 0) {
                $("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
                $("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
            } else {
                $("section").find("div").eq(0).css("-webkit-transform", "rotate3d(0,1,0,180deg)");
                $("section").find("div").eq(1).css("-webkit-transform", "rotate3d(0,1,0,0deg)");
            }
            sign++;
        }, 2000)

    </script>
    </html>


     

  • 相关阅读:
    RAID卡是否有(启用)缓存对“随机读写”性能有巨大的影响。
    《C++程序设计实践与技巧:测试驱动开发》 环境搭建遇到的坑
    c++ 实现 cout 示例
    c++ 文件
    js 鼠标事件模拟
    eclipse c++ 配置 c++ 17
    c++ 17 vector中string的性能问题 std::vector<std::string> string vs string_view
    c++ 17 模板
    C++17剖析:string在Modern C++中的实现
    编译程序加不加 -lpthread 的区别
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3259131.html
Copyright © 2011-2022 走看看