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=" ...
随机推荐
- nyoj 290 动物统计加强版 (字典树 (Trie) PS：map<TLE>)
动物统计加强版 时间限制:3000 ms | 内存限制:150000 KB 难度:4 描述 在美丽大兴安岭原始森林中存在数量繁多的物种,在勘察员带来的各种动物资料中有未统计数量的原始动物的名单 ...
- nyoj 71-独木舟上的旅行(贪心)
71-独木舟上的旅行 内存限制:64MB 时间限制:3000ms 特判: No 通过数:10 提交数:15 难度:2 题目描述: 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条 ...
- 创建sql自定义的函数及商品分页sql存储过程
--商品筛选时判断品牌ID是否存在 --select dbo.isValite(94,94)create function isValite(@brandId int,@bId int)returns ...
- Spring Boot2 系列教程(二十六)Spring Boot 整合 Redis
在 Redis 出现之前,我们的缓存框架各种各样,有了 Redis ,缓存方案基本上都统一了,关于 Redis,松哥之前有一个系列教程,尚不了解 Redis 的小伙伴可以参考这个教程: Redis 教 ...
- PL真有意思（四）：控制流
前言 对大多数计算模型而言,顺序都是基本的东西,它确定了为完成所期望的某种工作,什么事情应该最先做,什么事应该随后做,我们可以将语言规定顺序的机制分为几个类别: 顺序执行 选择 迭代 过程抽象 递归 ...
- pyhton3 之 time模块实例小结
一.实例1:实现秒表: import time print('按下回车开始计时,按下 Ctrl + C 停止计时.') while True: try: input() # 如果是 python 2. ...
- 【论文阅读】Diverse Image-to-Image Translation via Disentangled Representations（ECCV2018 oral）
目录 相关链接 方法亮点 相关工作 方法细节 实验结果 总结与收获 参考文献 相关链接: 论文:https://arxiv.org/abs/1808.00948 代码:https://github.c ...
- Android Saripaar 注解详解
写这篇文章的原因 在移动端一般很少使用复杂的表单,一般针对于属性的更改都会打开一个新的页面进行更改.虽然不多,但是也会有.如果一个页面要输入的内容包括姓名.地址.邮箱.手机号等,对各个属性的验证会非常 ...
- JS进阶面试题整理（仅仅整理我做错的题）
前几天看到掘金博客一篇文章,找到了这个JavaScript进阶问题列表:现在把地址贴出来,想找工作或者想要巩固自己JS的同学可以参考 该文档会不定时更新 一.箭头函数 箭头函数相当于匿名函数,并 ...
- k8s 上部署 Redis 三主三从 集群
目录 介绍 为什么要使用Redis? 什么是Redis群集? 在Kubernetes中部署Redis集群 从 GitHub 上下载: 创建pv 创建statefulset 创建service 初始化 ...