<!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并发同步互斥实现方式总结

    大家都知道加锁是用来在并发情况防止同一个资源被多方抢占的有效手段,加锁其实就是同步互斥(或称独占)也行,即:同一时间不论有多少并发请求,只有一个能处理,其余要么排队等待,要么放弃执行.关于锁的实现网上 ...

  2. jQuery---下拉菜单案例

    下拉菜单案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  3. linux-redis cluster集群（redis5.x）

    1.查看redis安装目录: [root@iZwz97y9qoykzzotubitq3Z redis-5.0.5]# lltotal 472-rw-rw-r-- 1 root root 106874 ...

  4. 【你不知道的javaScript 上卷 笔记4】javaScript 中闭包的一些运用

    什么是闭包 闭包是javaScript语言的一种特性,在 javaScript 中以函数作为承接单元.当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行. fun ...

  5. Spring的代理模式（静态，JDK，CGLIB）

    一.静态代理   1.定义业务接口 public interface Subject { void doSomeThing(); }   2.真实业务类实现接口 public class RealSu ...

  6. AttributeError: 'SQLAlchemy' object has no attribute 'Foreignkey'

    在学习<Flask Web开发----基于Python的Web应用开发实战>的过程中,调试程序,如下图,运行报错: AttributeError: 'SQLAlchemy' object ...

  7. HTML /和./的区别 - Web开发

    "/"访问根目录 例1 https://www.cnblogs.com/test 里有 <a href="/Edsuns"></a> 则 ...

  8. AcWing 532. 货币系统

    #include <cstring> #include <iostream> #include <algorithm> using namespace std; ; ...

  9. Ubuntu卸载软件Firefox

    查找火狐详细内容: dpkg --get-selections |grep firefox  删除 sudo apt-get purge firefox* 

  10. 208. 实现 Trie (前缀树)

    主要是记录一下这个数据结构. 比如这个trie树,包含三个单词:sea,sells,she. 代码: class Trie { bool isWord; vector<Trie*> chi ...