<!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. Java连载76-基础数据类型包装类型及其方法简介

    一.java中八种基本数据类型对应的包装类型 基本数据类型      包装类型 byte                    java.lang.Byte short                ...

  2. JS 动态改变浏览器title标题

    onfocus 和 onblur 事件,监听离开页面和进入页面 <script> window.onfocus = function () { document.title = '要走的人 ...

  3. 我的第一个原生Web Components——滑块（SingleSlider）

    写着写着,就会跑偏,没错又走上了一个岔道……就是不知道这条岔道以后会不会越来越宽,有的说他是未来,有的说…… 这里不知道,也不做什么评断.减少一些重复性的工作,提高开发效率这是最根本的.说白了就是偷懒 ...

  4. java - jmm之volatile特性

    volatile是什么? volatile是JVM提供的一种轻量级的同步机制,其具有三个特性. 保证可见性 不保证原子性 禁止指令重排 保证可见性 JMM(java memory model)中文翻译 ...

  5. json 的key值不能是变量

    var _key = name; var _value = 2; var params = { _key :_ value } _key 为变量 console.log(params); { _key ...

  6. 关于整合ssh中的细节03

    关于spring中提供的一些工具类和监听介绍 一.spring提供了一个HibernateTemplate类 ①HibernateTemplate类: 用于操作PO对象,类似Hibernate Ses ...

  7. Mapped Statements collection does not contain value for xxx

    这是我第二次遇到的这个问题了,总结下. 第一次的问题是 mybatis的sqlSessionFactory的mapperLocations,配置的是这个路径下的所有映射文件,但是我没写的没有在该路径下 ...

  8. Wannafly Camp 2020 Day 2E 阔力梯的树 - set,启发式合并

    搞一波启发式合并即可 #include <bits/stdc++.h> using namespace std; #define int long long #define iter se ...

  9. Initialization of bean failed; nested exception is java.lang.NoClassDefFoundError: org/objectweb/asm/Type

    问题描述 将项目挂载到 Myeclipse 的 tomcat 上,启动 tomcat ,报错“Initialization of bean failed; nested exception is ja ...

  10. ddctf，warm up，web题

    1,打开链接,发现下图,hhhh好滑稽啊,鹅鹅鹅鹅ee 2,打开源码发现source.php.添加到路径,再次访问,发现如下代码,来,让我们审计一下. 3,发现有个hint.php,进去看一看,得到一 ...