css3（2）
旋转：
2D:transform:
rotate()——进行旋转，括号内部写旋转角度，默认顺时针旋转.允许负值，元素将进行逆时针旋转,
translate()——从当前位置进行移动，括号内为x，y值。允许负值，将反方向移动
transform:translate(30px,30px)：向右30px，向下30px移动，原来位置保存,
scale()——改变原始尺寸，按照倍数变化，括号内为width、height的倍数
transform:scale(2,4)：宽度变为2倍，高度变为4倍,
skew()——水平、垂直方向进行扭转，括号内是水平扭转角度、垂直扭转角度
transform:skew(30deg,0deg);将横向扭转30度的div，内部文字会跟随扭转
transform:skew(0deg,30deg);将纵向扭转30度的div，内部文字会跟随扭转
transform:skew(30deg,30deg);将横向扭转30度、纵向扭转30度的div，内部文字会跟随扭转.
3D:transform:
rotateX()——沿水平X轴进行垂直的翻转，括号内写转动度数;
rotateY()——沿垂直Y轴进行水平的翻转，括号内写转动度数;
2D与3D的区别:
2D转换跟3D转换的区别：2D转换仅仅在于平面，文字可以看出并没有反过来
3D转换是相当于镜面效果的，进行了前后空间（涉及到了Z轴）的占用进行的翻转。
过渡：transition：专门应对颜色、长度、宽度、位置等变化的过渡：
例子：#aaa{
width:200px;
height: 200px;
border: 1px solid red;
transition:2s;
动画:
1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
2、使用animation进行动画捆绑。两个值：动画名称、时长
3、我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。
4、加上一个infinite值就可以无限执行了
5、ease——默认开始慢慢加速，结束时慢慢减速。
linear——默认始终使用相同速度运行。
alternate——交替执行（也可以成为正反执行）
例子：
div{
width:300px;
height:300px;
background:black;
position:relative;/*由于需要进行位置改变，所以增加了position属性*/
animation:myfirst 5s infinite alternate;/*动画捆绑，两个值，动画名称、时长，加上一个无限执行，交替执行*/
}
@keyframes myfirst
{/*改变位置和背景颜色*/
0% {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25% {background:yellow; border-radius:0px; left:400px; top:0px;}
50% {background:blue; border-radius:90px; left:400px; top:300px;}
75% {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}
弹性盒子：
CSS3 的一种新的布局模式:
定义为弹性盒子: display: flex;考虑浏览器兼容问题.
弹性子元素在父容器中的位置排列（横向、纵向）:
flex-direction:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
弹性子元素在父容器中的对齐方式:
横向对齐：justify-content：
flex-end：
center：
space-between：
space-around：
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
例子：
.flex-container {
display: flex;
width: 400px;
height: 250px;
}
.item1 {
flex:;
} .item2 {
flex:;
} .item3 {
flex:;
}
子元素的属性：
order：排序
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
} .flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} .first {
-webkit-order: -1;
order: -1;
}
</style>
</head>
<body> <div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item first">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div> </body>
margin：边距
align-self：纵轴对齐方式
多媒体查询：
@media screen and (max-width: 699px) and (min-width: 520px) {
ul li a {
padding-left: 30px;
background: url(email-icon.png) left center no-repeat;
}
}
@media screen and (max-width: 1000px) and (min-width: 700px) {
ul li a:before {
content: "Email: ";
font-style: italic;
color: #666666;
}
}
大于 1001px：
@media screen and (min-width: 1001px) {
ul li a:after {
content: " (" attr(data-email) ")";
font-size: 12px;
font-style: italic;
color: #666666;
}
}
css3（2）的更多相关文章
- 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- HTML5+CSS3（3）
一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) ...
- 从零开始学 Web 之 CSS3（一）CSS3概述，选择器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS3（三）渐变，background属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 菜鸟学习HTML5+CSS3（一）
主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD) HTML 5的DTD声明为:<!d ...
- HTML5+CSS3（2）
一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...
随机推荐
- 基于Windows下永久破解jetbrains公司的系列产品（Idea, pycharm,clion,phpstorm）
基于Windows下永久破解jetbrains公司的系列产品(Idea, pycharm,clion,phpstorm): PS : 有能力的建议购买正版,好吧. PS:均针对其对应的2018.3.1 ...
- windows下安装Apache、php、mysql集成环境
一.准备工作 本次安装的版本分别为:apache2.4 .php5.6 . mysql5.7 下载地址为:http://pan.baidu.com/s/1boQNIOn 密码:zarx 二.安装步骤 ...
- 简单入门Kubernetes
什么是Kubernetes 官网 https://kubernetes.io/ 中文版:https://kubernetes.io/zh/ 个人理解 基于容器技术 分布式架构 弹性伸缩 隔离物理机 和 ...
- Selenium+Java（十一）Selenium窗口切换
前言: Selenium在当前页面调整到新页面时打开了新的窗口,此时就需要跳转到新的窗口去,需要把窗口进行切换. 获取窗口句柄方法: 获取所有: //获取所有窗口句柄,返回的是set类型 driver ...
- 04-kubernetes 资源清单定义入门
目录 资源对象 创建资源的方法 清单帮助命令 创建测试清单 资源的三种创建方式 资源对象 workload:Pod, ReplicaSet, Deployment, StatefulSet, Daem ...
- css多行文本溢出显示省略号（兼容ie）
在日常编写页面中,我们经常遇到内容行数过多时,需要出现 “...” 来处理.但是又要考虑IE浏览器或IE内核浏览器的兼容性. 普通实现方法: display: -webkit-box; -webkit ...
- ios注册通知NSNotificationCenter(一)
作用:NSNotificationCenter是专门供程序中不同类间的消息通信而设置的. 注册通知:即要在什么地方接受消息 [[NSNotificationCenter defaultCenter] ...
- Hibernate注解之@Enumerated：针对枚举enum(转)
https://my.oschina.net/xinxingegeya/blog/359968 @Column(name = "store_type", nullable = fa ...
- PAT甲级专题|链表
PAT链表专题 关于PAT甲级的链表问题,主要内容 就是"建立链表" 所以第一步学会模拟链表,pat又不卡时间,这里用vector + 结构体,更简洁 模拟链表的普遍代码 cons ...
- Mac从拆箱到入门
Mac从拆箱到入门 记录首次使用Mac的我的历程,不是专业的Mac使用教程,只是简单的记录.还有我在使用过程中一些用到的功能都一些小提示吧. 1.首次开机配置,对于一个完全的新手来说(也就是我) ...