css3 3d效果及动画学习
css参考手册:
http://www.phpstudy.net/css3/
http://www.css88.com/book/css/
呈现3d效果:
-webkit-transform-style:preserve-3d; 透视距离:
-wenkit-perspective:300; 视角:
-webkit-perspective-origin:25% 75%;/*数字正负均可*/ 旋转和变换:
transform: translatex(-90px) translatez(90px) rotatey(90deg);
/*rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴
translateX,translateY,translateZ在XYZ轴上移动
scaleZ(sz)Z轴缩放
*/ 旋转页面要先设置position: absolute;使其脱离文档流。 动画效果:
animation /*简写属性,用于设置动画。*/
-webkit-transform-origin: 90px 90px 90px;/*设置旋转基准点*/
@keyframes/*设置动画*/
css3 3d效果及动画学习的更多相关文章
- css3 3D效果
css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...
- HTML5之CSS3 3D transform 剖析式学习之一
最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...
- 一篇文章搞定css3 3d效果
css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...
- Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- css3 3D变换和动画
3D变换和动画 建立3D空间,transform-style: preserve-3d perspective: 100px; 景深 perspective-origin:center center ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- css3 3d变换和动画——回顾
1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现. 语法:transform-style: flat | preserve-3d flat 表示所有子元素在2D平面呈现. p ...
- CSS3——3D效果
1.效果1 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" c ...
- jQuery/CSS3 3D焦点图动画
在线演示 本地下载
随机推荐
- PHP-query 的用法
Jquery Jquery实际上相当于一个升级版的JS,Jquery里面封装了很多的东西,Jquery的功能要比JS强大,用起来比JS方便.Jquery和JS都属于JS,只不过Jquery是封装了一个 ...
- Quartus 编译错误
1.Error (10028): Can't resolve multiple constant drivers for net ** 这种错误一般是由于定义的reg寄存器在多个always中进行赋值 ...
- NodeJS的小应用
server.js: //引入require 模块 var http=require('http'); //创建服务器 http.createServer(function(request,respo ...
- 【转】浏览器内核、渲染引擎、js引擎
[1]定义 浏览器内核分成两部分渲染引擎和js引擎,由于js引擎越来越独立,内核就倾向于只指渲染引擎 渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具[2]常见引擎 渲染引擎: firef ...
- 完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能
#!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...
- [Spring] - 动态设置properties
Spring的jar包用来做动态properties的getter/setter赋值方法: 1:需要的jar包: spring-beans-3.2.0.RC2.jar commons-logging- ...
- C#:安装Windows服务,动态指定服务名及描述
Installer.cs>> public Installer() { InitializeComponent(); /* 服务未注册前,System.Configuration.Conf ...
- ios7 indexPathForCell 的坑(真是一个大大的坑)
笔者在编写APP 有一个功能点击cell上一个button,修改cell的在tableview中的位置 在ios8上没有问题. 在ios7上总是崩溃 以下是崩溃后提示: Terminating app ...
- linux下开启mysql慢查询,分析查询语句
一,为什么要开启这个查询呢? 数据库是很容易产生瓶颈的地方,现在Nosql大家讨论这么热,估计都被数据库搞郁闷了.mysql中最影响速度的就是那些查询非常慢的语句,这些慢的语句,可能是写的不够合理或者 ...
- 高并发分布式系统中生成全局唯一Id汇总
数据在分片时,典型的是分库分表,就有一个全局ID生成的问题.单纯的生成全局ID并不是什么难题,但是生成的ID通常要满足分片的一些要求: 1 不能有单点故障. 2 以时间为序,或者ID里包含时间 ...