CSS3:变换和动画

<html>
  <style>
    .container{
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 40%;
    }
    .img{width:200px; padding:20px;}
    .trans{
      border:1px solid #333;height:100px;width: 200px;margin: 20px; float: left;
    }
    .trans_rotata{
      -webkit-transform:rotate(7deg);
    }
    .trans_rotataX{
      -webkit-transform:rotateX(60deg);
    }

    .trans_3d{
      -webkit-transform:rotate3d(1,-1,0,60deg)
    }

    .opacity{
      opacity: 0.2;
    }

    .trans_scale{
      -webkit-transform:scale(1.1, 1.1);
    }

    .trans_scale3D{
      -webkit-transform:scale3D(1.1, 1.1, 1.1);
    }

    .img:hover{
      -webkit-transform:scale3D(1.1, 1.1, 1.1);
    }
    .trans_skew{
      -webkit-transform:skew(30deg,10deg);
    }

    @-webkit-keyframes spin {
     from {
       -webkit-transform: rotateY(0);
     }
     to {
       -webkit-transform: rotateY(-360deg);
     }
   }
   .cube {
     margin: 0 auto;
     width: 200px;
     height: 200px;
     position: relative;
     -webkit-animation: spin 8s infinite linear;
     -webkit-transform-style: preserve-3d;
   }
   .cube .rect {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 200px;
     height: 200px;
     border-radius: 5px;
     border: 1px solid #ccc;
     font-size: 125pt;
     text-align: center;
     line-height: 200px;
     background-color: #bbb;
     opacity: 0.5;
   }
   .cube .cubeA {
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
   }
   .cube .cubeB {
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);
   }
   .cube .cubeC {
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
   }
   .cube .cubeD {
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
   }
   .cube .cubeE {
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
   }
   .cube .cubeF {
     -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(0deg) translateZ(100px);
   } 

  </style>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script>
    $(document).ready(function(){
      $(".trans_rotata").click(function(){
        var now = "3700";
       $(this).animate({deg: 5000},{
        step: function(now,fx) {
          $(this).css(‘-webkit-transform‘,‘rotate(‘+now+‘deg)‘);
          $(this).css(‘-moz-transform‘,‘rotate(‘+now+‘deg)‘);
          $(this).css(‘-ms-transform‘,‘rotate(‘+now+‘deg)‘);
          $(this).css(‘-o-transform‘,‘rotate(‘+now+‘deg)‘);
          $(this).css(‘transform‘,‘rotate(‘+now+‘deg)‘);
        },
        duration:‘slow‘
        },‘linear‘);
      })

    })
  </script>

  <div class="container">
    <div class="trans trans_rotata"></div>
    <div class="trans"></div>
    <div class="trans trans_rotataX"></div>
    <div class="trans trans_skew"></div>
    <br>
    <img class="img"src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_rotataX" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">

    <img class="img trans_3d" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_3ds" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_scale" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">
    <img class="img trans_scale3D opacity" src="http://h.hiphotos.baidu.com/image/w%3D2048/sign=d3c034d4e4cd7b89e96c3d833b1c43a7/a8773912b31bb051ffde8736347adab44aede031.jpg">

    <div class="cube"><!--用于为子元素设置3D效果,同时围绕的坐标轴也是以此元素为基础。若在这里放景深,跳不出来效果-->
        <div class="cubeA rect">1</div><!--具体效果看css就明白了。旋转下就好-->
        <div class="cubeB rect">2</div>
        <div class="cubeC rect">3</div>
        <div class="cubeD rect">4</div>
        <div class="cubeE rect">5</div>
        <div class="cubeF rect">6</div>
    </div>
  </div>
</html>

时间: 2024-10-03 13:46:48

CSS3:变换和动画的相关文章

css3 3D变换和动画

3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center -180px;  景深基点 transform新增函数如下: rotateX(); rotateY(); rotateZ(); translateZ(); scaleZ(); 3d动画demo,只支持Webkit内核,可自行运行查看效果 <!DOCTYPE HTML> <html> &

CSS3中的动画效果记录

今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform 属性允许你修改CSS可视化模型的坐标控件.使用transform,元素可以安装设定的值变形.旋转.缩放.倾斜. 语法: transform : none | <transform-function> [ <transform-function> ]* 也就是: transform: r

八、CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果,下面我们就来介绍下这两种功能. 1.Transitions功能 1.1 Transitions功能的使用方法 CSS3中,Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能,使用方法如下: transition:属性名 过渡时间间隔 过渡方法 延迟时间,第一个属性值表示对哪个属性进行平滑过渡,第二个属性表示在

强大的CSS3/JS:帧动画的多种实现方式与性能对比

Web动画形式 首先我们来了解一下Web有哪些动画形式 1\. CSS3动画 Transform(变形) Transition(过渡) Animation(动画) 2\. JS动画(操作DOM.修改CSS属性值) 3\. Canvas动画 4\. SVG动画 5\. 以Three.js为首的3D动画 以上各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动画,定格动画,逐帧动画等,这里我们统一用帧动画来表述. 这里推荐一下我的前端学习交流扣qun:767273102 ,里面都是学习

9款极具创意的HTML5/CSS3进度条动画(免积分下载)

尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detail/yangwei19680827/7352505 今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加

CSS3的自定义动画帧

CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: translate3d(x, y, z)-位移;.transform:rotateX/Y(?deg)-旋转; 演示地址:http://wjf444128852.github.io/demo02/css3/index.html @keyframes 动画名{} @-处理兼容性-keyframesanimatio

CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 1.Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能.transition属性的用法如下: transition:property duration timing-function; 其中,property表示对哪个属性平滑过渡,取值可以是“background-color”.“color”.“width

css3 --- 翻页动画 --- javascript --- 3d --- 准备

用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transition属性做的渐变颜色动画,下面是三张截图: 怎么样?好看吧,下面是它的代码: -webkit-transition: background-color 2s;-webkit-是用chrome或safari打开的一个前缀,transition时表示渐变的属性,它的值是 渐变属性 和 渐变时间,上面注释的部分

css3 简单界面动画

asdasdasdasda asdasdasdasdacss3 简单界面动画,布布扣,bubuko.com