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. libopencv_imgcodecs3.so.3.3.1: undefined reference to `TIFFReadDirectory@LIBTIFF_4.0

    ubundu 编译 C++工程时遇到的: 解决方案: https://blog.csdn.net/qq_29572513/article/details/88742652

  2. UE4开发PSVR游戏的常见问题

    Failed to connect to file server at xxx.xxx.xxx.xxx. RETRYING in 5s解决办法:PS4 Devkit 中 Settings->De ...

  3. 黑马lavarel教程---2、获取用户输入

    黑马lavarel教程---2.获取用户输入 一.总结 一句话总结: lavarel中获取用户输入可以通过Input外观模式和Request外观模式,两者的对应的方法啥的都一样,比如get.all.o ...

  4. Your first HTML form

    The first article in our series provides your very first experience of creating an HTML form, includ ...

  5. sql server查询结果复制出来，没有换行(存进去的数据是换行的)

    https://stackoverflow.com/questions/53115490/how-to-correctly-insert-newline-in-nvarchar The problem ...

  6. MySQL 服务器性能剖析

    这是<高性能 MySQL(第三版)>第三章的读书笔记. 关于服务,常见的问题有: 如何确认服务器是否发挥了最大性能 找出执行慢的语句,为何执行慢 为何在用户端发生间歇性的停顿.卡死 通过性 ...

  7. HTML-字符实体，平方米（㎡）m²

    转载自:https://blog.csdn.net/hangGe0111/article/details/80983250

  8. (appium+python)UI自动化_10_adb常用命令

    前言 adb(Android Debug Bridge)工具是android-sdk里的一个工具,是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互.在app自动化测试过程中,有时要用到adb命 ...

  9. MapReduce(1): Prepare input for Mappers

    According to Wikipedia MapReduce, there are two ways to illustrate MapReduce. One contains three ste ...

  10. $_POST,$_GET,$_REQUEST区分

    PHP $_REQUEST PHP $_REQUEST 用于收集 HTML 表单提交的数据. 下面的例子展示了一个包含输入字段及提交按钮的表单.当用户通过点击提交按钮来提交表单数据时, 表单数据将发送 ...