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. elememt-ui 的 el-icon-iconName 图标 显示问题！

    今天想在按钮处添加一个图标,但是显示不出.自己找了半天,终于找到了,希望帮到大家! 1,首先是没有报错的,但是有警告⚠ 意思是说什么拦截了之类的问题,但是到底是哪里问题导致拦截了呢?找了好久,原来是我 ...

  2. webdriver显式和隐式等待、强制等待

    implicitly_wait() 方法是隐式等待,用来设置超时,一般把implicitly_wait()方法调用在加载测试地址后,等待所测试的应用程序加载WebDriverWait() 是显式等待, ...

  3. 01 安装IDEA

    https://www.jetbrains.com 1 . 2

  4. 【CF1244D】Paint the Tree（树形DP，树）

    题意: n<=1e5,1<=a[i][j]<=1e9 思路: 不是很懂INF为什么要开到1e15,我觉得只要1e14就好 #include<bits/stdc++.h> ...

  5. BUUCTF |[0CTF 2016]piapiapia

    步骤: nickname[]=wherewherewherewherewherewherewherewherewherewherewherewherewherewherewherewherewhere ...

  6. Linux 软件安装到哪里合适，目录详解

    文章来源: https://blog.csdn.net/qq_22771739/article/details/83933473 Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有 ...

  7. 运用php函数mkdir创建多级目录

    php默认的mkdir一次只能创建一层目录,如果在当前目录下创建一个div/css/layout 的目录就需要逐层逐层的先创建div,再创建div/css 再创建 div/css/layout,然而我 ...

  8. 【HANA系列】SAP HANA的特点总结

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA的特点总结   ...

  9. C#将字符串Split()成数组

    string str="aaajbbbjccc";string[] sArray=str.Split('j');foreach(string i in sArray) Respon ...

  10. LeetCode10 Indexed tree

    Binary Indexed Tree(Fenwick tree): 是一个查询和修改复杂度都为log(n)的数据结构.主要用于查询任意两位之间的所有元素之和,但是每次只能修改一个元素的值:经过简单修 ...