<!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. pandas玩转excel-> (1)如何利用pandas创建excel数据文件

    #在Anaconda3 的Spyder中   #定义pandas模块为pd import pandas as pd   #创建一个新的DataFrame对象,定义这个对象中有两个字段:ID和Name, ...

  2. mac 安装Kafka

    1. 安装zookeeper brew install zookeeper 默认安装位置 启动文件: /usr/local/Cellar/zookeeper/3.4.10/bin/ 配置文件: /us ...

  3. 【Unity|C#】基础篇(18)——正则表达式（Regex类）

    [学习资料] <C#图解教程>:https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu.com/s/ ...

  4. Laravel中使用QRcode自制二维码

    一.配置 1.在项目根目录输入命令 composer require simplesoftwareio/simple-qrcode 1.3.* 2.在config/app.php 的 provider ...

  5. vue制作滚动条幅-跑马灯效果实例代码

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. xmlns:android="http://schemas.android.com/apk/res/android 这句话的作用

    xmlns:android="http://schemas.android.com/apk/res/android 有了这句话,你就可以alt+/作为提示,提示你输入什么,不该输入什么,什么 ...

  7. 在vue中使用swiper4.x

    需求 :实现一个左右两边有边距的轮播图vue+swiper4 轮播图左右两边含有上一张和下一张的一部分 先安装swiper: 1.npm install swiper 安装swiper   2.在入口 ...

  8. Python入门6 —— 流程控制 - if判断

    代码块: 1.代码块指的是同一级别的代码,在python中用缩进相同的空格数(除了顶级代码块无任何缩进之外,其余代码块都是在原有的基础上缩进4个空格)来标识同一级的代码块 2.同一级别的代码块会按照自 ...

  9. xshell连接本地虚拟机中的centos

    1. 一开始Xshell连接不上(设置为DHCP 动态IP)虚拟机上的centos8 参考这篇博文,将centos上的DHCP改为static 静态IP xshell连接本地虚拟机中的centos 2 ...

  10. 用户登录（php）

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><script type=& ...