过渡

转换

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. 程序员如何 10 分钟用 Python 画出蒙娜丽莎？

    之前看到过很多头条,说哪国某人坚持了多少年自学使用excel画画,效果十分惊艳.对于他们的耐心我十分敬佩. 但是作为一个程序员,自然也得挑战一下自己. 这种需求,我们十分钟就可以完成! 基本思路   ...

  2. 008.Delphi插件之QPlugins，服务的两种调用方法

    这个QPlugins自带的DEMO,大概的意思就是,创建2个服务类,程序启动的时候注册这2个服务类.点击不同的按钮,使用不同的方法来调用这个服务. 效果界面如下 unit Frm_Main; inte ...

  3. PL/SQL 找到某列都为空的列名

    DECLARE CURSOR temp IS SELECT COLUMN_NAME FROM ALL_TAB_COLUMNS WHERE TABLE_NAME=Upper('xxx'); v_num ...

  4. git参考

    https://github.com/NewLifeX  (redis.mq.数据海量查询.分布式任务调度)

  5. Windows 10中使用VirtualBox

    新版Windows 10或者安装了新的更新以后,VirtualBox虚拟机就不能用了. 原因是WIndows10里面有个叫Virtualization-base security的安全机制打开了. 关 ...

  6. Elasticsearch核心概念

    Elasticsearch 核心概念 Cluster 代表一个集群, 集群中有多个节点, 其中一个为主节点, 该节点可以通过选举产生.(主从节点只针对于集群内部) 去中心化: 对于集群外来说无中心节点 ...

  7. 浅谈Python之sys.argv

    (1)sys.argv是什么 sys模块为进入解释器维护或使用的变量,以及与解释器相关的函数提供了途径.sys.argv在脚本程序中扮演了这样一个角色:将命令行输入的参数作为一个list传入脚本程序, ...

  8. UVA - 1262 Password（密码）（暴力枚举）

    题意:给两个6行5列的字母矩阵,找出满足如下条件的“密码”:密码中的每个字母在两个矩阵的对应列中均出现.给定k(1<=k<=7777),你的任务是找出字典序第k小的密码.如果不存在,输出N ...

  9. 【LeetCode】两个数相加

    [问题]给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. [实例] 输入: ...

  10. -webkit-appearance —— webkit外观样式属性

    -webkit-appearance —— webkit外观样式属性 -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 ...