<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>

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

  1. css3 变换、过渡效果、动画

    1 CSS3 选择器 1.1 基本选择器 1.2 层级 空格 > + .item+li ~ .item~p 1.3 属性选择器 [attr] [attr=value] [attr^=value] ...

  2. css3 3D变换和动画

    3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center ...

  3. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  4. css变换与动画详解

    举个栗子:--------元素整体居中.box{     position:absolute;top:50%;left:50%;    width:50px;    height:50px;    t ...

  5. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  6. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  7. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  8. CSS3实现魔方动画

    本文将借助css3实现魔方动画效果,设计思路如下: HTML方面采用六个div容器形成六个立方面: CSS方面采用transform-style: preserve-3d;形成三维场景:transfo ...

  9. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

随机推荐

  1. Node & Express: some tips

    1. 设置Express端口号: 在app.js中添加 app.set('port', process.env.PORT || 3000); 之后命令行中打入 PORT=1234 node app.j ...

  2. 在Java中按字节获得字符串长度的三种方法

    转载:http://www.blogjava.net/nokiaguy/archive/2010/04/11/317982.html 由于Java是基于Unicode编码的,因此,一个汉字的长度为1, ...

  3. Cocos2d-x教程(34)－三维物体OBB碰撞检測算法

    欢迎增加Cocos2d-x 交流群:193411763 个中心点.1个旋转矩阵和3个1/2边长(注:一个旋转矩阵包括了三个旋转轴,若是二维的OBB包围盒则是一个中心点,两个旋转轴,两个1/2边长). ...

  4. 新浪微博开放平台之OAuth2.0认证

    1.先到开放平台创建一个移动应用.获得key和secret,接着到"应用信息"里面填写授权回调页的网址,该网址能够随意,可是必须是能訪问的. 2.通过新浪提供的api:https: ...

  5. Unity3d代码从Android/IOS迁移到WindowsPhone经验笔记

    [1搭建坏境] 推荐:Windows 8.1 Enterprise + Visual studio 2013(完整安装) PS: 假设要Visual Studio 2012,先安装VS再安装WP8/W ...

  6. 推断client手机类型,并跳转到对应的app下载页面

    实现的原理,是检測浏览器的 USER-AGENT 这个header,然后依据正則表達式来确定client类型. 假设都不匹配,Fallback回退策略是显示相应的页面.让用户自己选择. 适合採用二维码 ...

  7. WingIDE 5.0注冊机

    在wingIDE下开发python很方便,但IDE不是免费的,网上有破解的方法.请支持正版. 把下列文件CalcActivationCode.py载入到wingIDE中.LicenseID能够随便给一 ...

  8. 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。 数据库连接不释放测试 连接池 释放连接 关闭连接 有关 redis-py 连接池会导致服务器产生大量 CLOSE_WAIT 的再讨论以及一个解决方案

    import pymysqlfrom redis import Redisimport time h, pt, u, p, db = '192.168.2.210', 3306, 'root', 'n ...

  9. sqlserver 触发器实例代码

    定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序.触发器是一个特殊的存储过程. 常见的触发器有三种:分别应用于Insert , Update ...

  10. 使iframe随内容（target到iframe的内容）改变而自适应高度，完美解决各种获取第一个demo高度后第二个高度不变情况

    转自:http://caiceclb.iteye.com/blog/281102 很高兴,终于使用jquery实现了点击外部链接,更改iframe内容时,iframe的高度自适应问题. 失败的测试就不 ...