<!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. （一）Python模块化编程简介

    1 引言 众所周知,模块化编程具备很多优点,尤其在复杂项目上体现更为明显.Python模块化编程有助于开发者统筹兼顾和分工协作,并提升代码灵活性和可维护性,是编程开发者不可或缺的一项重要工具. 2 P ...

  2. Scrum简介

    1. 什么是Scrum Scrum是一种轻量级的框架,适合于小型的.结合紧密的团队开发复杂的产品.Scrum是二十世纪后期一些软件工程师协同努力的脑力劳动的成果,现已成为技术领域最具魅力的方法.但Sc ...

  3. bookdown学习笔记

    主要参考大佬谢益辉的bookdown学习笔记 https://bookdown.org/yihui/bookdown/pandoc.html 灰常之详细 然后clone了他写好的小demo,准备自己试 ...

  4. 微信小程序之数组操作：push与concat的区别

    微信小程序中需要用到数组的操作,push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(); arr.push(); arr.push([, ...

  5. localStorage存、取数组

    localStorage存储数组时需要先使用JSON.stringify()转成字符串,取的时候再字符串转数组JSON.parse(). var arr=[1,2,3,4]; localStorage ...

  6. 在线教育厮杀惨烈，51Talk一家独大之后，却仍是持续亏损？

    编辑 | 于斌 出品 | 于见(mpyujian) 来自51Talk在线少儿英语专业的学生陈和涛已经成为最近<快乐营大本营>的一个亮点.该学生应邀以流利的英语在台上作自我介绍,并与51Ta ...

  7. SpringCloud Netflix Zuul

    网关的概念 服务A.B都是暴露出来,供外部直接调用的, 有时候需要对请求进行过滤.校验,比如检验用户是否已登陆,可以写在暴露出来的每个服务中,但要在多个服务中写相同的代码,太繁琐,可以提出来,放在网关 ...

  8. @Html.DropDownList()的四种用法及自定义DropDownList扩展

    https://blog.csdn.net/xiaouncle/article/details/82856982

  9. 什么是OOP

    面向对象是相对于面向过程而言的.面向过程语言是一种基于功能分析的.以算法为中心的程序设计方法:而面向对象是一种基于结构分析的.以数据为中心的程序设计思想.早在面向过程语言时代,有一句话说:程序=算法+ ...

  10. SQL Server查询中特殊字符的处理方法 （SQL Server特殊符号的转义处理）

    SQL Server查询中特殊字符的处理方法 (SQL Server特殊符号的转义处理) SQL Server查询中,经常会遇到一些特殊字符,比如单引号'等,这些字符的处理方法,是SQL Server ...