2D特效和3D特效
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特效的更多相关文章
- Mask裁切UI粒子特效或者3D模型
刚好前几天有人问我这个问题,再加上新项目也可能用,所以这两天就研究了一下.其实如果粒子特效 和3D模型 都用RenderTexture来做的话就不会有裁切的问题,但是粒子特效用RenderTextur ...
- Cocos2d-x学习笔记（十二）3D特效
特效类即是GridAction类,其实就是基于网格的3D动作类.需开启OpenGL的深度缓冲,否则容易3D失真. 下边是一个snippet,创建网格对象,并将其添加到当前layer:同时,将进行3D特 ...
- css3 3d特效汇总
本篇全是实战,没有基础,如果不明白3d特效的原理,可能会看不懂,不过没关系,给你推荐一下 张鑫旭css3 3d转换,或者看我的另一篇博客 css3 2d转换3d转换以及动画的知识点汇总,看完这些3d ...
- 10个超漂亮的CSS 3D特效
10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...
- 所有用CSS3写的3D特效，都离不开这些知识
起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果.非常高大上. 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就好了,够快.但是现实工作中,其实自 ...
- 二.ubuntu14.04 3D特效设置
一.如果按照第一篇都设置好了(显卡驱动等都已经正常),然后 1.安装CCSM设置管理器 用鼠标点击屏幕左侧Unity程序启动栏中的“Ubuntu软件中心”(有“A”字形的公文包图标), 在弹出的“Ub ...
- 腾讯QQ空间穿越时光轴3D特效
<DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style&g ...
- WPF特效-实现3D足球效果
原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下: 每个面加载不同贴图. <UserControl x:Class="MediaBalll.Model3Ds ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
随机推荐
- 201521123076 《Java程序设计》第6周学习总结
1.本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖面 ...
- 201521123104《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. (1)继承时子类将获得父类的属性与方法,并具有自身特有的属性与方法. (2)使用super还 ...
- 201521123049 《JAVA程序设计》 第3周学习总结
1. 本周学习总结 1.学习了对象与类的定义: 2.掌握了构造函数与其重载: 3.学会了this关键字的利用: 4.明白了静态变量与非静态变量的区分. 下面是对本周学习的图片小结: 2. 书面作业 Q ...
- 201521123023《java程序设计》第三周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123045 《Java程序设计》第2周学习总结
---恢复内容开始--- #1. 本周学习总结 上课讲解了上次的实验题目,对其中题目的一些问题得到了解决.学会了java数组的使用,对如何使用码云上传代码有了更清晰的理解.pta还是有一些问题没有解决 ...
- Junit4学习（二）测试失败的情况
一,前言 首先理解: 1,测试用例不是证明你是对的,而是证明你没有错 2,测试用例用来达到想要的预期结果,但对于逻辑错误无能为力 二,两种测试失败:error And Failure 1,Failur ...
- ecshop商城系统登录出现登录闪退问题
症状:ecshop商城系统提示登录成功,而且状态也是登录,一刷新,自动退出了,真坑爹 解决方案: 1.点着点着经常无故退出,感觉session被清空了.查找原因:ecshop中有用ip地址来验证,而公 ...
- Java多线程高并发学习笔记(三)——深入理解线程池
线程池最核心的一个类:ThreadPoolExecutor. 看一下该类的构造器: public ThreadPoolExecutor(int paramInt1, int paramInt2, lo ...
- XML【介绍、用途、了解XML技术架构、语法】
什么是XML? XML:extensiable markup language 被称作可扩展标记语言 XML简单的历史介绍: gml->sgml->html->xml gml(通用标 ...
- 新版本mac 无法打开第三方应用
新版本mac 没有任何应用可以打开的这个选项 现在解决方法已经找到 特此标记一下 1打开终端 2 输入 sudo spctl --master-disable 3.打开系统设置的中的安全即可出现