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. 实现网页qq在线咨询功能

    在自己的网页中实现qq在线咨询,给图片或链接添加地址为:tencent://message/?uin=你的qq号码!就可以了. <a href="tencent://message/? ...

  2. Django 基础笔记补充

    1.目录文件 django-admin.py startproject mydj cd mydj python manage.py startapp myapp   后生成目录: mydj/ ├── ...

  3. C++ 运算符优先级顺序表 (最新/完整)

    优先级 运算符 结合律 助记 1 :: 从左至右 作用域 2 a++.a--.type().type{}.a().a[]...-> 从左至右 后缀自增减.函数风格转型.函数调用.下标.成员访问 ...

  4. [CSP-S模拟测试]:Game（模拟）

    题目传送门(内部题62) 输入格式 第一行两个整数$n,K$表示序列长度和游戏数 第二行$n$个数为序列$a_i$ 第三行$K$个数,为$p_i$ 输出格式 输出有$K$行,第$i$行为第$i$次游戏 ...

  5. 音悦台 api分析

    用户订阅MV更新 http://uapi.yinyuetai.com/i/flw/subscribe-video-list?page=1&pageSize=200&uid=XXXXXX ...

  6. Remote desktop manager共享账号

    因为多个远程机器,是会用了域账号进行登录的.而域账号的密码,三个月之后,密码强制过期 添加一个新的entry,类型是Credential Entry,然后选择用户名/密码 在remote deskto ...

  7. 洛谷P1546 最短网络 Agri-Net（最小生成树，Kruskal）

    洛谷P1546 最短网络 Agri-Net 最小生成树模板题. 直接使用 Kruskal 求解. 复杂度为 \(O(E\log E)\) . #include<stdio.h> #incl ...

  8. noi.ac#228 book

    分析 代码 #include<bits/stdc++.h> using namespace std; #define int long long const int inf =1e18; ...

  9. mariadb（一）基础

    一.数据库介绍 1.什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库提供的多种方法来 ...

  10. 04 | 基础篇：经常说的 CPU 上下文切换是什么意思？（下）

    上一节,我给你讲了 CPU 上下文切换的工作原理.简单回顾一下,CPU 上下文切换是保证 Linux 系统正常工作的一个核心功能,按照不同场景,可以分为进程上下文切换.线程上下文切换和中断上下文切换. ...