2D居中效果

div{

width:

height:

backgroundcolor:

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%)

}    将DIV绝对定位后，使用transform（使改变，使移动）将其移动。

2D旋转效果

div:hover{

transform:rotate(45deg)

} 当鼠标放到DIV上，这个DIV旋转45度角。

中心在左上角加一句代码在div中：

Transform-origin:top left;

2D缩放效果

div:hover{

transform:scale(50%)}鼠标移是移上缩放一半的效果

若只缩放X轴，transform:scaleX(0.5)

2D斜切效果

div:hover{

transform:skewx(45deg)

} 沿着X轴斜切45度角

2D过渡型

transition: all 0.5s   宽高在鼠标放上后都变化,用了0.5秒

transition:width 0.5s ease 2s  宽度在两秒后变化，变化过程0.5秒

div{

原始div

transition:width 0.5s ease 2s

}

div:hover{

变化后的样子

}

transition: all 0.5s   宽高在鼠标放上后都变化,用了0.5秒

transition:width 0.5 ease 2s  宽度在两秒后变化，变化过程0.5秒

头像旋转

img{

　　border:1px solid red;

display:block;

margin:50px auto;

border-radius:50%

transform:all 0.5s}

img:hover{

transform:rotate(360deg)

}

3D特效

1，沿着X轴旋转,perspective:往Z轴400像素45度

div{

DIV

perspective:400px;

}

img:hover{

transform:rotateX(45deg)

}

打开的盒子

<style type="text/css">

#tu{

width:300px;

height:260px;

margin:100px auto;

position:relative;

}

#tu1,#tu2{

width:300px;

height:260px;

background:url(photo/haha01.jpg) ;

border:1px black solid;

border-radius:50%;

position:absolute;

top:0px;

left:0px;

}

#tu2{

background:url(photo/haha04.jpg) ;

transition:all 2s;

transform-origin:bottom

}

#tu:hover #tu2{

transform:rotateX(180deg);

}

<body>

<div id="tu">

<div id="tu1"></div>

<div id="tu2"></div>

</div>

</body>

2D特效和3D特效的更多相关文章

  1. Mask裁切UI粒子特效或者3D模型

    刚好前几天有人问我这个问题,再加上新项目也可能用,所以这两天就研究了一下.其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题,但是粒子特效用RenderTextur ...

  2. Cocos2d-x学习笔记（十二）3D特效

    特效类即是GridAction类,其实就是基于网格的3D动作类.需开启OpenGL的深度缓冲,否则容易3D失真. 下边是一个snippet,创建网格对象,并将其添加到当前layer:同时,将进行3D特 ...

  3. css3 3d特效汇总

    本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客  css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...

  4. 10个超漂亮的CSS 3D特效

    10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...

  5. 所有用CSS3写的3D特效，都离不开这些知识

    起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...

  6. 二.ubuntu14.04 3D特效设置

    一.如果按照第一篇都设置好了(显卡驱动等都已经正常),然后 1.安装CCSM设置管理器 用鼠标点击屏幕左侧Unity程序启动栏中的“Ubuntu软件中心”(有“A”字形的公文包图标), 在弹出的“Ub ...

  7. 腾讯QQ空间穿越时光轴3D特效

    <DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style&g ...

  8. WPF特效-实现3D足球效果

    原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下:  每个面加载不同贴图. <UserControl x:Class="MediaBalll.Model3Ds ...

  9. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

随机推荐

  1. 201521123065《java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 1.流的划分:输入流:字节流(InputStream).字符流(reader): 输出流:字节流(Output ...

  2. java第九次学习总结

    1. 本周学习总结 2.. 书面作业 1.常用异常 题目5-1 1.1 提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 以前编写的代码经常出现异 ...

  3. 201521123054 《Java程序设计》第14周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 1.1建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 1.2在自己建立的数据库上执行常见SQL语句 ...

  4. 201521123117 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  5. 201521123048 《java程序设计》 第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...

  6. 201521123066 《Java程序设计》第十一周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synch ...

  7. 控制结构(5) 必经之地(using)

    // 上一篇:局部化(localization) // 下一篇:最近最少使用(LRU) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上一周,我们谈到了分支/卫语句 ...

  8. 《MySQL必知必会》[03] 表数据的增删改

    1.增:插入数据 INSERT关键字可以插入新的行到数据库表中: 插入完整的行 插入行的一部分 插入多行 插入某些查询的结果 基本的INSERT语句是: INSERT INTO R(A1, A2, . ...

  9. spring的一些问题

    1.什么是spring? spring是一个轻量级的一站式框架,它的核心有两个部分,1.aop面向切面编程 2.ioc控制反转. 2.什么是aop aop就是面向切面编程,使用aop可以使业务逻辑各个 ...

  10. Jquery Ajax type的4种类型

    Ajax type这个里面填什么呢?通常大家都会说get和post.那么还有2个是什么呢 $.ajax({ url: 'http://www.cnblogs.com/youku/', type: '' ...