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>
CSS3:变换和动画的更多相关文章
- css3 变换、过渡效果、动画
1 CSS3 选择器 1.1 基本选择器 1.2 层级 空格 > + .item+li ~ .item~p 1.3 属性选择器 [attr] [attr=value] [attr^=value] ...
- css3 3D变换和动画
3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- css变换与动画详解
举个栗子:--------元素整体居中.box{ position:absolute;top:50%;left:50%; width:50px; height:50px; t ...
- CSS3中的动画
CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...
- CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
- IT兄弟连 HTML5教程 CSS3属性特效 动画-animation
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...
- CSS3实现魔方动画
本文将借助css3实现魔方动画效果,设计思路如下: HTML方面采用六个div容器形成六个立方面: CSS方面采用transform-style: preserve-3d;形成三维场景:transfo ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
随机推荐
- zoj——2588 Burning Bridges
Burning Bridges Time Limit: 5 Seconds Memory Limit: 32768 KB Ferry Kingdom is a nice little cou ...
- java ee标准DataSource理解
- ubuntu刪除升級后多余的内核
列出所安装的内核 带有image的就是内核文件dpkg --get-selections|grep linuxlibselinux1 installlinux-386 installlinux-ima ...
- 错误代码： 1045 Access denied for user 'skyusers'@'%' (using password: YES)
1. 错误描写叙述 GRANT ALL PRIVILEGES ON *.* TO root@"%" IDENTIFIED BY "."; 1 queries e ...
- OC-内存管理的一些要点
创建一个BOOK对象,对其属性进行声明 定义. @property 属性声明 定义了对属性的赋值 -(void) dealloc 方法在对象销毁的时候进行调用. #import <Foundat ...
- configure: error: mysql configure failed. Please check config.log for more information.
为php添加mysql模块时报错 configure: error: mysql configure failed. Please check config.log for more informat ...
- css高级：font-size
body{ font:62.5%/1.6em "Lucida Grande",Verdana,Geneva,Helvetica,Arial,sansserif; }//font-s ...
- Android 驱动 （一） GPIO
前面的博文对Lichee做了系列分析,事实上就是对在<七年之痒>中所说的,Android BSP具备的一项基本素养-SHELL脚本,所以我们Lichee系列的文章着重分析了SHELL脚本和 ...
- 【树剖求LCA】树剖知识点
不太优美但是有注释的版本: #include<cstdio> #include<iostream> using namespace std; struct edge{ int ...
- java 多线程——同步 学习笔记
一.实例的同步方法 public synchronized void add(int value){ this.count += value; } Java 实例方法同步是同步在拥有该方法的对象上 ...