<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3变形，阴影和渐变背景色属性</title>

</head>

<!--

变形【transform】

向元素应用2d或3d转换。该属性允许我们对元素进行旋转，缩放，移动或倾斜

transform参数：

rotate（角度值）：旋转

translate（x，y）：移动

scale（x，y）：缩放

skew（x，y）：扭曲

matrix（a,b,c,d,e,f）:矩阵

变形【transform】

改变元素基点 transform-origin:x y;

改变transform动作的基点（中心点）。

对象阴影【box-shadow】

语法：box-shadow:投影方式 x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色；

可以使用一个或多个投影，如果使用多个投影时必须用逗号，分开。

另外，还可以通过inset来设置对象的内阴影

背景颜色线性渐变【linear-gradient】

语法：

background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)；

起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角

过渡色：可以插入多个，表示多种颜色的渐变

 -->

<style>

    .transform{

        width: 1000px;

        background-color: #fdfdfd;

        margin:50px auto;

    }

    .transform:after{

        clear:both;

        content: ' ';

        display: block;

        overflow: hidden;

    }

    .transform > p{

        width: 230px;

        float: left;

        border:1px #999 solid;

        margin-right: 10px;

        text-align: center;

        padding-bottom: 10px;

    }

    .transform > p strong{

        display: block;

        background-color: #eee;

        font-size: 20px;

        line-height: 28px;

        font-family: "MicrosoftYaHei";

        color:#333;

        margin-bottom: 10px;

    }

    .transform > p  span{

        display: block;

        width: 100px;

        height: 100px;

        margin:0 auto;

        border:1px #ccc solid;

        background-color: #09f;

    }

    .transform.origin > p  span{

        background-color: #0c0;

        /* 改变基点 */

        transform-origin:0 -40px;

    }

    .transform > p .roate{

        transform:rotate(20deg);

    }

    .transform > p .translate{

        transform:translate(20px,20px);

    }

    .transform > p .scale{

        transform:scale(.5);

    }

    .transform > p .skew{

        transform:skew(20deg,-30deg);

    }

</style>

<body>

    <div class="transform">

        <p>

            <strong>旋转(roate)</strong>

            <span class="roate"></span>

        </p>

        <p>

            <strong>移动(translate)</strong>

            <span class="translate"></span>

        </p>

        <p>

            <strong>缩放(scale)</strong>

            <span class="scale"></span>

        </p>

        <p>

            <strong>扭曲（skew)</strong>

            <span class="skew"></span>

        </p>

    </div>

    <div class="transform origin">

        <p>

            <strong>旋转(roate)</strong>

            <span class="roate"></span>

        </p>

        <p>

            <strong>移动(translate)</strong>

            <span class="translate"></span>

        </p>

        <p>

            <strong>缩放(scale)</strong>

            <span class="scale"></span>

        </p>

        <p>

            <strong>扭曲（skew)</strong>

            <span class="skew"></span>

        </p>

    </div>

</body>

</html>

css之变形（transform）的更多相关文章

  1. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  2. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  3. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  4. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  5. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  6. 变形transform的副作用

    前面的话   变形transform本来是一个用来处理移动.旋转.缩放和倾斜等基本操作的CSS3属性,但该属性除了完成其本职工作之后,还对普通元素造成了意想不到的影响,本文将详细介绍transform ...

  7. Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具

    Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...

  8. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  9. css变形 transform【转】

    transition:过度属性 transition-property 规定设置过度效果的css属性的名称,默认可以写all transition-duration 规定完成过度效果需要多少秒或毫秒 ...

  10. 深入理解CSS变形transform(3d)

    × 目录 [1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格 前面的话 本文将详细介绍关于transform变形3D的内容,但需以了解transf ...

随机推荐

  1. 《Photoshop 2020》初心版_v6 21.0.2.57

    <Phtoshop 2020>初心版_v6 下载地址(5245) SHA1:E926A1B99D147A27A44050A5BCE2E69E2CDAEEAE 版本信息    发行版本 20 ...

  2. react admin

    react admin 管理后台的快速创建方式

  3. Vuejs中created和mounted的区别

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作

  4. 洛谷P5534 【XR-3】等差数列 耻辱！！！

    题目描述 小 X 给了你一个等差数列的前两项以及项数,请你求出这个等差数列各项之和. 等差数列:对于一个 nnn 项数列 aaa,如果满足对于任意 i∈[1,n)i \in [1,n)i∈[1,n), ...

  5. VScode usage

    Common settings editor.minimap.enabled     //close the preview workbench.editor.show tabs  // show f ...

  6. UI自动化测试的Page Object模式

    在UI级的自动化测试框架中,当页面样式改变或者页面元素属性改变,那么代码也要随之进行修改,如何做到高效快速的修改代码来适应这些改变呢,这个时候可以引入Page Object模式,也是页面对象设计模式. ...

  7. java通过浏览器请求头（User-Agent）获取访问者设备信息以及系统版本

    个人博客 地址:http://www.wenhaofan.com/article/20181125220342 在开发AutuBlog项目时需要做后台的登录记录,想起浏览器的User-Agent,于是 ...

  8. vue老项目升级vue-cli3.0

    第一步我们卸载全局的vue2.0然后: 打开命令行 输入npm install -g @vue/cli-init   这个就是会安装全局的vue3.0版本.安装好之后我们也可以vue -V查看当前vu ...

  9. Linux 基本命令简单学习

    平常工作中需要使用到的一些Linux基本命令,简单记录: 通过订单号查看日志:   cat /---/---/xxxx20190908.log | grep C52918588112261 -C 5 ...

  10. shell内置命令和外部命令的区别

    内部命令实际上是shell程序的一部分,其中包含的是一些比较简单的linux系统命令,这些命令由shell程序识别并在shell程序内部完成运行,通常在linux系统加载运行时shell就被加载并驻留 ...