过渡

转换

2D转换

2D转换包括四个方面：位移，缩放，旋转，倾斜

位移【让元素移动位置】

      transform: translate(100px,100px);

      备注：

          1. 如果只设置一个值，那么代表在水平方向移动

          2. 如果设置两个值，那么第一个值代表水平方向，第二个值代表垂直方向

          3. 可以设置负数，负数代表相反方向

          4. 通过translate移动元素位置的时候，是相对元素自己本身，可以设置百分比。

缩放【放大缩小】：

      transform: scale(2,1);

      备注：

         1. 如果设置的是一个值，那么代表当前元素的宽度和高度同时放大或缩小对应的倍数。

         2. 如果设置两个值，第一个值代表宽度的放大或缩小，第二值代表高度的放大或缩小。

         3. 设置的值不能带任何单位,不能设置负数。

         4. 设置大于0 小于1的值，代表缩小。

         5. 给父元素设置缩放的时候不会影响子元素。

旋转：

     transform: rotate(角度)

      备注：

          1. 角度的单位是deg    例如： 30deg

          2. 如果设置的是正数那么代表顺时针旋转，反之逆时针旋转。

倾斜：

     transform: skew(45deg,45deg);

     备注：

        1. 如果设置一个值，代表当前元素是沿着x轴，让y轴倾斜了

        2. 如果设置两个值，第一个值沿着x轴，让y轴倾斜，第二值代表沿着y轴，x轴发生倾斜。

 注意：

     1. transform属于复合属性。如果设置多个值的时候，要使用复合写法：

        transform: translate(length, length) rotate() scale(0, 0) skew(angle, angle);

     2. 默认元素在旋转或者倾斜的时候，是按照中心点进行旋转的。

　　　　  如果希望改变旋转点（旋转轴），通过transform-origin 设置即可。

         取值可以是具体的方位名称： left  | right | bottom  | top 

         或者可以设置具体值:

         transform-origin: right bottom;

         transform-origin: right 200px;

2D转化案例

鼠标悬浮在盒子上，盒子向右移动：

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    div {

      width: 100px;

      height: 100px;

      background-color: red;
　　　　// 过渡属性

      transition: transform 1s linear;

    }

    div:hover {

        // 设置向正方向移动400px

      transform: translate(400px,0);

    }

  </style>

</head>

<body>

  <div></div>

</body>

</html>

3D转换

位移

     1. transfrom: translateX(值);   正数代表向右移动，负数代表向左移动

     2. transform:translateY(值);   正数代表向下移动，负数代表向上移动

     3. transform:transalteZ(值)；   正数代表朝向我们自己移动，负数代表背向移动

      备注：

          1. 3D位移也是相当元素自己。

          2. 3D位移也可以设置百分比

旋转

     1. transform: rotateX(值deg)；

     2. transform: rotateY(值deg);

     3. transform: rotateZ(值deg);

     遵循左手法则，坐标轴也跟着旋转

缩放

      1. transform: scaleX(2)

      2. transform: scaleY(2)

透视：
1. 要给父元素设置perspective;
2. perspective的取值可以影响我们视觉上的效果差。【600-1000推荐设置的值】

转换为立体效果：
transform-style: preserve-3d;

3D转换案例

俩个盒子重叠在一起，鼠标悬浮在上面，一个盒子旋转45°。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            position: relative;

            transform-style: preserve-3d;

        }

        .box > div{

            width: 100%;

            height: 100%;

            position: absolute;

        }

        .box .front{

            background: red;

        }

        .box .back{

            background: green;

            /* transform: skew(0,0) rotateX(0deg); */

            transition: all 1s linear;

        }

        .box .back:hover {

            transform: skew(45deg,0) rotateX(45deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="front"></div>

        <div class="back"></div>

    </div>

</body>

</html>

CSS3新特性—过渡、转换的更多相关文章

  1. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  2. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  3. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  4. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  5. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  6. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  7. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  8. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  9. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

随机推荐

  1. 解决phpinfo 和php -v版本不一致的问题

    解决方法:参考博文 http://blog.csdn.net/laomengnevergiveup/article/details/52104862

  2. JS：利用for循环进行数组去重

    <script> var a = [1, 3, 2, 4, 5, 3, 2, 1, 4, 6, 7, 7, 6, 6]; //示例数组    var b = []; for(var i = ...

  3. angularJS MVC及$scope作用域

  4. Python 日志模块详解

    前言 我们知道查看日志是开发人员日常获取信息.排查异常.发现问题的最好途径,日志记录中通常会标记有异常产生的原因.发生时间.具体错误行数等信息,这极大的节省了我们的排查时间,无形中提高了编码效率.所以 ...

  5. maven项目打包和运行

    1. 添加pom <build> <plugins> <plugin> <artifactId>maven-assembly-plugin</ar ...

  6. P1082 射击比赛

    P1082 射击比赛 转跳点:

  7. Git Fork别人的代码后如同步别人的代码

    在git上fork别人的代码后,如果别人代码有更新,自己fork的代码是不能自动更新的.需要手动操作. git remote -v 查看是否有远程分支的别名.例如:git remote -v 后显示如 ...

  8. 从ofo牵手理财平台看，用户隐私数据的使用有底线吗？

    智慧生活的到来既是社会变迁的拐点,又不可避免地带来一种挥之不去的焦虑.这种焦虑的由来,是因个人隐私数据在智慧生活下变成一种"黑暗财富".随着相关数据挖掘.收集.分析技术的成熟,人们 ...

  9. nodejs学习笔记（一）：centos7安装node环境

    由于windows环境安装nodejs只需要访问官方网站下载压缩包,解压即可. 首先检查自己是否安装==wget==,已安装可以跳过这步,未安装则需要先安装: linux yum install -y ...

  10. ubuntu12.04 安装完XRDP显示空白桌面

    先放链接:http://c-nergy.be/blog/?p=3518 在ubuntu软件中心搜索:fallback session,安装gnome-session-fallback: 在主文件夹(h ...