<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. 简单解决 WIN10更新后 远程桌面提示 CredSSP加密Oracle修正的问题

    更新WIN10后,打开远程桌面,提示: 以 管理员身份打开 cmd或者PowerShell,贴入: REG ADD HKLM\Software\Microsoft\Windows\CurrentVer ...

  2. Javascript: 动态显示进度条

    {% if not config.exec_id == '' %} <br /> <div class="progress"> <div class= ...

  3. Ubuntu上面安装Redis Python

    Ubuntu上面安装Redis Python 1,下载redis源码https://redis.io/download,下载地址:http://124.205.69.169/files/A092000 ...

  4. jQuery 中ready与load事件

    jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...

  5. 一个人开发的.Net版轻量级博客,欢迎吐槽,互相学习!

    项目架构采用:Asp.Net MVC4.0 + EntityFramework6.0 code first + AutoMapper + Unity(IOC) + SqlServer2012 项目地址 ...

  6. JDBC高级特性(一)结果集,批量更新

    一.ResultSet的高级特性 1 可滚动ResultSet 1)向前和向后滚动 滚动特性 在JDBC初期版本号中, ResultSet仅能向前滚动 在JDBC兴许版本号中, ResultSet默认 ...

  7. 配置远程连接mysql数据库 Connect to remote mysql database

    设有本地机器(local machine), ip地址为localip 远程机器(remote machine), ip地址remoteip 要通过在local machine的终端连接remote ...

  8. Domain-specific language 领域特定语言

    https://en.wikipedia.org/wiki/Domain-specific_language A domain-specific language (DSL) is a compute ...

  9. S6十大特性

    http://www.alloyteam.com/2016/03/es6-front-end-developers-will-have-to-know-the-top-ten-properties/

  10. 硬盘-RAID 5组建

    没发正文之前本人先声明一下----本文是转载 这篇文章简直是太精彩了,呵呵 ,实在是忍不住了,一定要贴出来,让大家分享! 原作者:唐华 责任编辑:xiexiaojin 我们生活在一个历史记录在硬盘上的 ...