过渡

转换

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. 关于http的两种上传方法

    http传输数据GET和POST的两种方法: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.get方式传递的参数可以在URL上看见,安全性不高,反之post安全 ...

  2. php笔记04

    PHP+MySQL 连接数据库 mysqli <?php $servername="localhost"; $username="root"; $pass ...

  3. Problem J. Joseph’s Problem 约瑟夫问题--余数之和

    链接:https://vjudge.net/problem/UVA-1363 题意:给出n  k,当 i 属于 1~n 时 ,求解 n% i 的和 n 和 k 的范围都是 1 到 10^9; 商相同 ...

  4. pixi的图片处理

    pixi的图片处理   var texture = PIXI.Texture.fromImage('sprite.png');var sprite = new PIXI.Sprite(texture) ...

  5. laravel.url

    通过php artisan route:list 可以看到当前应用的路由情况, 在前端页面中如果要修改一个实体,需要用到实体.update,涉及的uri为实体/{实体},所用的http方法为put. ...

  6. 爬虫(十七)：Scrapy框架(四) 对接selenium爬取京东商品数据

    1. Scrapy对接Selenium Scrapy抓取页面的方式和requests库类似,都是直接模拟HTTP请求,而Scrapy也不能抓取JavaScript动态谊染的页面.在前面的博客中抓取Ja ...

  7. 《新标准C++程序设计》3.8（C++学习笔记10）

    友元 友元分为友元函数和友元类两种. 一.友元函数 在定义一个类的时候,可以把一些函数(包括全局函数和其它类的成员函数)声明为“友元”,这样那些函数就成为该类的友元函数,在友元函数内部就可以访问该类对 ...

  8. Vue.js（25）之 vue全局配置api介绍

    本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com ...

  9. MFC工程合并

    假使有两个工程,分别为工程A和工程B. 第一步:把A中.rc文件中的 两张图中间的对话框资源拷贝出来,粘贴到B工程中的.rc资源文件中,也是两张图中间 第二步:打开工程-----VIEW------R ...

  10. arm安装cuda9.0，tensorflow-gpu, jetson tx2安装Jetpack踩坑合集

    因为要在arm(aarch64)架构的linux环境中安装tensorflow-gpu,但是官方tf网上没有对应的版本,所以我们找了好久,找到一个其他人编译好的tensorflow on arm的gi ...