CSS3分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已经开始制订。[18]直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。[19]

CSS3里增加了不少功能，如：“border-radius”、“text-shadow”、“transform”以及“transition”。CSS3亦支持动画（animation）及立体（preserved-3d）。

部分属性（例如旋转类属性（如：transform），动画类属性，立体类属性），由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分

我们看一个css3的例子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css3旋转元素</title>

<style>

  div {

       width: 100px;

       height: 75px;

       border: 1px solid black;

       background-color: red;

  }

  div#div2 {

       transform: rotate(30deg);

       -ms-transform: rotate(30deg); /*IE 9*/

       -webkit-transform: rotate(30deg); /*Safari and Chrome*/

  }

</style>

</head>

<body>

   <div>

     这是一个div元素

   </div>

   <div id="div2">这是一个旋转后的div元素</div>

</body>

</html>

效果如下：

这是一个旋转元素的例子，这里使用了transform属性,该属性允许我们对元素进行,旋转,缩放，移动或倾斜

css3系列--概述的更多相关文章

  1. CSS3系列教程:HSL 和HSL

    使用CSS3 HSL声明同样是用来设置颜色的.下一个呢? HSLA? 是的,这个和RGBA的效果是一样的. HSL声明使用色调Hue(H).饱和度Saturation(s)和亮度Lightness(L ...

  2. css3系列之详解perspective

    perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样.比如说, perspective:800px   意思就是,我在离屏幕800px 的地方观看这 ...

  3. css3系列之transform详解translate

    translate translate这个参数的,是transform 身上的,那么它有什么用呢? 其实他的作用很简单,就是平移,参考自己的位置来平移 translate() translateX() ...

  4. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  5. css3系列之过渡transition

    transition 设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等. transition trans ...

  6. css3系列之text-shadow 浮雕效果，镂空效果，荧光效果，遮罩效果

    text-shadow 其实这东西,跟  box-shadow 差不多,没啥好说的不懂的话,点这里→  css3系列之详解box-shadow  . 它只有 四个参数 x(第一个值设置x位置) y(第 ...

  7. 技术分享: CSS3 系列

    技术分享: CSS3 系列 css 一键换肤 css 打印样式,媒体查询 css 禁用选择 css 性能优化 css 计算单位 css 3D 特效 refs xgqfrms 2012-2020 www ...

  8. CSS3系列一（概述、选择器、使用选择器插入内容）

    CSS3模块化结构 CSS历史发展 CSS(Cascading Style Sheet),层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. CSS3属性选择器 E[att ...

  9. CSS3系列之3D制作

    一.序 博主最近这些天,突发奇想的想研究一下CSS3的东西,从而提升一下CSS的能力,在学习的过程中发现其实CSS3是一个挺复杂的东西,深入的研究,你可能会涉及到初中的光学理论来帮助理解一些概念,同时 ...

随机推荐

  1. PCA(基础知识)

    参考:http://blog.csdn.net/wangjian1204/article/details/50642732 参考:https://www.zhihu.com/question/3831 ...

  2. 20180712-Java Character类

    char ch = 'a';// Unicode for uppercase Greek omega characterchar uniChar = '\u039A';//字符数组char[] cha ...

  3. ThreadLocal学习资料

    下面的这一段代码运行起来,就会发生线程安全问题: 启动两个线程,同时去修改 name 属性值. package com.liwei.thread; /** * 下面的代码演示了线程安全发生的由来 * ...

  4. 基于canvas实现的高性能、跨平台的股票图表库--clchart

    什么是 ClChart? ClChart是一个基于canvas创建的简单.高性能和跨平台的股票数据可视化开源项目.支持PC.webApp以及React Native和Weex等平台.在React Na ...

  5. PADS软件

    最近学习PADS,搜集到的一些软件.之前一直在使用Altium designer,但是AD太占资源了,还有都说PADS比AD好. 下面是来自网上对主流PCB的介绍(原文:http://9mcu.com ...

  6. base64编码操作图片

    package com.trsmedia.service; import java.io.FileInputStream; import java.io.FileOutputStream; impor ...

  7. Red Hat Linux下安装JDK

    1. 下载Linux平台的JDK 下载对应操作系统的jdk,操作系统是32位的就下32位的jdk,64位的就下64位的jdk.下错了装不上的. 下载地址:http://www.Oracle.com/t ...

  8. 批量执行SQL脚本

    新建文件夹all_sql,并将需要执行的sql脚本放入其中. 新建bat脚本,执行即可,ORACLE 也可改Mysql,按需:如下 ::echo off :: @echo off echo 开始执行数 ...

  9. 测开之路八十三：高级函数：map()和filter()

    # map(函数名,可迭代对象)# 给可迭代对象的每个值+5l = list(range(1, 21)) def add_number(x):    return x + 5 # 第一种方式print ...

  10. android:imeOptions="actionDone"

    把EditText的Ime Options属性设置成不同的值,Enter键上可以显示不同的文字或图案actionNone : 回车键,按下后光标到下一行actionSend : SendactionN ...