旋转：

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-start：
    弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
    flex-end：
    弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
    center：
    弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
    space-between：
    弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
    space-around：
    弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
 
 
 
纵向对齐：
align-items：
 
 
    flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
    stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
 
 
 
弹性子元素如何分配空间：
 
flex：

例子：

.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：纵轴对齐方式

多媒体查询：

 
 
520 到 699px：
@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;
    }
}
 
 
 
 700 到 1000px：
@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）的更多相关文章

  1. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  2. 前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  3. 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性

    一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...

  4. HTML5+CSS3（3）

    一.CSS3新增属性用法整理 1.box-shadow(阴影效果) 2.border-color(为边框设置多种颜色) 3.border-image(图片边框) 4.text-shadow(文本阴影) ...

  5. 从零开始学 Web 之 CSS3（一）CSS3概述，选择器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 CSS3（三）渐变，background属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 菜鸟学习HTML5+CSS3（一）

    主要内容: 1.新的文档类型声明(DTD) 2.新增的HTML5标签 3.删除的HTML标签 4.重新定义的HTML标签 一.新的文档类型声明(DTD)    HTML 5的DTD声明为:<!d ...

  9. HTML5+CSS3（2）

    一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...

随机推荐

  1. 深入讲解 Laravel 的 IoC 服务容器

    众所周知,Laravel 控制反转 (IoC) / 依赖注入 (DI) 的功能非常强大.遗憾的是, 官方文档 并没有详细讲解它的所有功能,所以我决定自己实践一下,并整理成文.下面的代码是基于 Lara ...

  2. 搭建Redis三主三从集群

    Redis三主三从集群规划 10.0.128.19   使用端口 7000  7001 10.0.128.22   使用端口 7002  7003 10.0.128.23   使用端口 7004  7 ...

  3. 【故障公告】docker swarm 集群问题造成新版博客后台故障

    非常抱歉,今天下午 16:55~17:05 左右,由于 docker swarm 集群的突发不稳定问题造成新版博客后台(目前处于灰度发布阶段)无法正常使用,由此给您带来麻烦,请您谅解. 出故障期时,新 ...

  4. Mint UI Example的运行

    Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...

  5. ASP.NET Core MVC+EF Core项目实战

    项目背景 本项目参考于<Pro Entity Framework Core 2 for ASP.NET Core MVC>一书,项目内容为party邀请答复. 新建项目 本项目开发工具为V ...

  6. 防范XSS攻击

    原文链接:http://www.cnblogs.com/chenty/p/5136834.html 最近,有个项目突然接到总部的安全漏洞报告,查看后知道是XSS攻击. 问题描述: 在页面上有个隐藏域: ...

  7. css控制ul标签下的指定li标签样式

    ul li:first-child{ }  第一个ul li:last-child{ }   最后一个ul li:nth-child(4){ } 指定第几个,4就是代表第四个ul li:nth-chi ...

  8. Dockerfile构建私有镜像

    构建第一个镜像 镜像的定制实际上就是定制每一层所添加的配置,文件.我们可以把每一层修改,安装,构建,操作的命令都写入一个脚本,这个脚本就是Dockerfile.Dockerfile是一个文本文件,其内 ...

  9. 爬取豆瓣热销书榜前250 生成.csv文件

    from lxml import etreeimport requestsimport csvfp = open('E:/doubanbook.csv','wt',newline='',encodin ...

  10. 怎么解决js中如滑动到最底端一次操作触发多次

    定义一个布尔类型到标志,处理中将起设置为true ,处理完改完false,逻辑: data{ isInProcessing:false } //逻辑函数过程中: if(isInProcessing){ ...