CSS3--属性前缀、新增选择器、文本属性、边框属性、背景属性、精灵技术(雪碧图)、线性渐变、径向渐变、栅格系统、多列、字体图标、滑动门、动画、2D和3D

小白小白从不日白

已于 2022-04-13 14:41:21 修改

阅读量572

点赞数

分类专栏： html+css 文章标签： CSS3

于 2021-07-17 15:20:42 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/118856190

版权

html+css 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、新增属性和选择器

1.1 属性前缀

对于CSS3的一些语法，并不是所有浏览器或者同一浏览器都支持，因此需要兼容处理，通常的做法就是加厂商前缀

1.2 新增选择器

1.3 文本属性

a.text-shadow：

文本阴影主流浏览器都支持

h1 {
      text-align: center;
      text-shadow: 5px 5px 5px #ff0000;
 }

<h1>text-shadow</h1>

b.word-wrap：

文本自动换行

c.word-break:

单词拆分

p {
     width: 172px;
     word-break: break-all;
}

<p>https://mp.csdn.net/mp_blog/creation/editor</p>

d.text-wrap:

文本拆分

目前主流浏览器都不支持 text-wrap 属性

e.text-overflow:

文本溢出

单行文本溢出，

p {
            width: 160px;
            overflow: hidden;
            //设置文本不换行显示
            white-space: nowrap;
            text-overflow: ellipsis;
        }

<p>2021中国加油，世界加油！</p>

多行文本溢出，

 div {
            width: 160px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
       }

<div>
        <p>2021中国加油，世界加油！</p>
        <p>2021中国加油，世界加油！</p>
        <p>2021中国加油，世界加油！</p>
</div>

f. -webkit-box-reflect 倒影

概念：实现图片的倒影
语法：
```
box-reflect:倒影方向  倒影和图片之间的距离 [可添加渐变效果]
```
- above：指定倒影在对象的上边（倒影和内容重叠）
- below：指定倒影在对象的下边
- left：指定倒影在对象的左边
- right：指定倒影在对象的右边
注意：
- box-reflect 目前就谷歌有实现，并且该css属性在谷歌中使用需加收-webkit- 前缀

-webkit-box-reflct 可以设置图片倒影，并不是所有浏览器都支持，chrome可以使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   html,body{margin:50px 0;}
.reflect{width:950px;margin:0 auto;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
font:bold 100px/1.231 georgia,sans-serif;text-transform:uppercase;}
</style>
</head>
<body>
<div class="reflect">你看到倒影了么？<img src="img/gyy.jpg" alt=""></div>
</body>
</html>

1.4 边框属性

a.border-radius：

圆角边框

标准写法：
/前面代表四个方向的水平半径，/后面代表四个方向的垂直半径
border-radius：10px  10px  10px  10px  / 10px 10px 10px 10px;

示例1,

div {
            margin: 100px auto;
            width: 120px;
            height: 120px;
            background-color: orange;
            border-radius: 50%;
        }

<div></div>

示例2，

 div {
            margin: 100px auto;
            width: 120px;
            height: 120px;
            background-color: orange;
            border-top-left-radius: 20px;
            border-top-right-radius: 30px;
            border-bottom-left-radius: 40px;
            border-bottom-right-radius: 50px;
        }

<div></div>

b.box-shadow:

边框阴影 IE9以上支持

示例，

 div {
            margin: 100px auto;
            width: 120px;
            height: 120px;
            box-shadow: 5px 10px 20px 20px red;
        }

<div></div>

c.border-image：

1.5 背景属性

a.background-color：

设置背景颜色

b.background-image：

背景图片

注意：设置背景图片的时候一定要设置宽度和高度

c.background-repeat:

repeat （默认值平铺 x,y均平铺）|

no-repeat （不平铺）|

repeat-x | （横向平铺）

repeat-y （纵向平铺）

d.background-size:

设置背景图片的尺寸，兼容到IE9

需要等比例设置的值，写auto

e.background-position:

设置背景位置

设置具体值的时候不区分先后顺序

设置具体数字的时候，第一个值代表水平方向，第二个值代表垂直方向

f.background-attachment:

设置背景是否固定

g.background-clip:

设置元素的背景裁切到哪个盒子。兼容到IE9

h.属性连写--background：

注意：没有数量限制和先后顺序限制

同时设置多个背景图片：

1.6 精灵技术(雪碧图)

示例：

        .box {
            width: 35px;
            height: 35px;
            /* 加载雪碧图 */
            background-image: url("./images/雪碧图.png");
        }

        .box1 {
            width: 35px;
            height: 35px;
            /* 加载雪碧图 */
            background-image: url("./images/雪碧图.png");
            /* background-position: x y;  */
            background-position: -35px 0;
            /*
            可以设置雪碧图的大小
            background-size: x y;
            */
        }

    <div class="box"></div>

    <div class="box1"></div>

注意：

当容器缩小或者放大时，雪碧图也应该跟随进行放大或缩小相同倍数，利用 backround-size属性进行。例如：移动端做适配的时候就可能需要用到2倍图或者是3倍图，那么这个时候也就应该通过 background-size 进行相应的缩放2倍或3倍

1.7 线性渐变

默认从上到下，至少有两个颜色，通过linear-gradient来设置
线性渐变是渐变线（方向）和色标组成
语法：

/* linear-gradient 是用于创建一个线性渐变的 "图像" */
baclground-image:linear-gradient(颜色1，颜色2,....);

backgound-image:linear-gradient(to 结束的方向，red，green)

baclground-image:linear-gradient(颜色1 百分比，颜色2 百分比,....);

baclground-image:linear-gradient(渐变线方向，颜色1位置，颜色2位置，颜色3位置)；

渐变线方向： to 方向单词角度deg

色标：
颜色：十六进制，rgb ，rgba，单词
位置：百分比，或者像素

角度可以设置正数或者负数

0deg表示沿着中心线由下向上的方向，类似y轴的负方向，正数角度代表顺时针旋转多少度，负数代表逆时针旋转

色标=（颜色+位置）

色标包含一个颜色和一个位置，用来控制渐变的颜色变化

取值：

颜色：单词，十六进制，rgb，rgba（设置背景颜色可以透明）
位置：百分比，像素px

注意：

渐变没有写位置值，只有颜色，均匀渐变效果；

渐变至少需要写两个色标，如果色标中首尾两个默认不写，是0%和100%；

当然也可以自己定义位置值

background-image: linear-gradient(red 50%,green 80%,yellow 90%);

如果渐变有三个值，第一个值位置设置50%，第二个设置80%，第三个设置90%，0%-50%默认第一个种颜色的纯色，50%-80%是第一种颜色到第二颜色的渐变，80%-90%是第二种颜色到第三种颜色的渐变，90%-100%是第三种颜色的纯色。
色标可以无数个，可以设置多种颜色

重复线性渐变：
可以实现线性渐变的重复效果，使色标在渐变盒子中按照方向径向无限重复

注意：起始值必须从0开始

background-image:repeating-linear-gradient(red 0%,green 20%);

兼容问题：

/* 针对chrome或者safira识别 */
background-image: -webkit-linear-gradient(red,green);
/* 针对firefox */
background-image: -moz-linear-gradient(red,green);
/* 针对opera */
background-image: -o-linear-gradient(red,green);
/* 针对ie浏览器识别的前缀 */
background-image: -ms-linear-gradient(red,green);
/* 通用的样式 */
background-image: linear-gradient(red,green);

ie9及以下浏览不支持线性渐变（使用ie提供渐变滤镜）：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');

GradientType：代表渐变的方向，0代表垂直方向，1代表水平方向，只有两个方向
startColorstr：代表开始颜色，endColorstr代表结束的颜色

公共部分：

.box {
            margin: 100px auto;
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            
        }

<div class="box"></div>

示例1，

 .box {
            background-image: linear-gradient(to right, blue, red);
        }

示例2，

 .box {
            background-image: linear-gradient(45deg, blue, red);
        }

示例3，

.box {
         
            background-image: linear-gradient(to right, red, yellow, orange, blue, purple);
        }

示例4，

  .box {
            /* 这里的20%表示，黄色出现在20%位置处 */
            background-image: linear-gradient(to right, red, yellow 20%, orange, blue, purple);
        }

1.8 径向渐变（了解）

径向渐变其实就是椭圆渐变，圆是一种特殊的椭圆

径向渐变从圆心出发，沿着半径径向渐变，以椭圆的形式向外径向发散出去

径向渐变无法实现ie兼容，只有ie10以上支持标准写法

径向渐变由两部分构成：

椭圆：用来控制径向渐变的大小，形状，位置。
色标：每个色标都包含一个颜色和一个渐变位置，用来控制渐变颜色变化

标准语法：

background-image:radial-gradient( 形状 大小  at left/right/top/bottom(x轴  y轴)，色标1，色标2 )

at：指的是圆心所在位置

圆心：

默认值center center，盒子的中心点

 /* 圆心 通过at来控制圆心的位置 其中0px 0px 盒子的左上角，center center是默认值，中心点*/
            /*
background-iamge:radial-gradient(at x轴  y轴,red,green)

x轴：left | |right | center |像素 | 百分比
y轴：top | center | bottom | 像素 | 百分比

形状：

ellipse：椭圆，默认值，
circle：正圆

大小：

通常需要搭配圆心位置来调整

farthest-corner：默认值，半径从圆心到最远角
closest-corner：半径从圆心到最近角
farthest-side：半径从圆心到最远边
closest-side：半径从圆心到最近边

重复径向渐变：

background-image:repeating-radial-gradient(red 0% ,green  30%);

注意，色标的首尾不能同时在0%和100%的位置，要留空间给渐变重复

 <style>
        .box{
            width: 1000px;
            height: 1000px;
            margin: auto;
            /* 重复径向渐变 */
            background-image: repeating-radial-gradient(pink 0px,pink
             20px , tomato 20px , tomato 40px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

示例，

.box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            /* 这里的20%表示，黄色出现在20%位置处 */
            background-image: radial-gradient(50% 50%, red, yellow 20%, orange, blue, purple);
        }

<div class="box"></div>

1.9 文字渐变

示例，

.box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-image: -webkit-linear-gradient(45deg, #f35626, #feab3a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

<div class="box">
        <p>2021中国加油，世界加油！</p>
    </div>

1.10 栅格系统

栅格系统是媒体查询的具体实现

栅格系统将页面自动分为 12 个格子，可以根据不同的类前缀实现不同的页面布局

1.11 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局

创建多列：

column-count 属性指定了需要分割的列数

列与列之间的间隙：

column-gap 属性指定了列与列间的间隙

列边框：

column-rule-style 属性指定了列与列间的边框样式

column-rule-width 属性指定了两列的边框厚度

column-rule-color 属性指定了两列的边框颜色

column-rule-* 所有属性的简写

1.12 字体图标

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

常用字体图标库：阿里字体图标库

1.13 滑动门

iconfont.css，

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1639212292610') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ico_listarrow:before {
  content: "\e615";
}

iconfont.ttf 省略

index.html，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont.css">
    <style>

        *{
            margin: 0;
            padding: 0;
        }

        body{
            background-color: #f1f1f1;
        }

        .slide{
            width: 234px;
            height: 420px;
            background-color: rgba(105,101, 101, 0.6);
            padding: 20px 0;
            margin: 100px;
            position: relative;
        }

        .slide ul{
            list-style: none;
        }

        .slide ul li{
            width: 100%;
            height: 42px;
            line-height: 42px;
            text-align: left;
            padding-left: 30px;
            box-sizing: border-box;
        }

        .slide ul li:hover{
            background-color: #ff6700;
        }

        .slide ul li a{
            display: inline-block;
            text-decoration: none;
            color: #fff;
        }

        .slide .iconfont{
            display: inline-block;
            font-size: 24px;
            color: #fff;
            position:absolute;
            right: 10px;
        }

        .slide-list{
            width: 992px;
            height: 460px;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 234px;
            border: 1px solid #e0e0e0;
            border-left: none;
            box-sizing: border-box;
            box-shadow: 0 4px 16px rgba(0,0,0,0.18);
            display: none;
        }

        /* 鼠标滑动到li标签上，让slide-list的div显示 */
        .slide ul li:hover>.slide-list{
            display: block;
        }

    </style>
</head>
<body>

    <div class="slide">
        <ul>
            <li>
                <a href="#">手机</a>
                <span class="iconfont icon-ico_listarrow"></span>
                <div class="slide-list">小米1</div>
            </li>
            <li>
                <a href="#">电视</a>
                <span class="iconfont icon-ico_listarrow"></span>
                <div class="slide-list">小米2</div>
            </li>
        </ul>
    </div>
    
</body>
</html>

二、动画

动画的原理：

1.视觉暂留作用

2.画面逐渐变化

动画的作用：

1.愉悦感

2.引起注意

3.对一些操作进行反馈

4.掩饰

2.1 transition补间动画

位置--平移(left/right/margin/transition)
方位--旋转(transform)
大小--缩放(transform)
透明度(opacity)
其他--线性变换(transform)

transition:

transition-delay 指定何时将开始切换效果，以秒为单位（S）或毫秒（ms）
transition-duration 规定完成过渡效果需要花费的时间（以秒或毫秒计）
transition-property 指定CSS属性的名称转换效果，通常会出现在当用户将鼠标悬停在一个元素上时，始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果
transition-timing-function 指定切换效果的速度，此属性允许一个过渡效果，以改变其持续时间的速度；transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
可以同时支持多个属性变动
定义动画进展和时间的关系：

transition-property：

设置过渡的属性名
语法： transtion-property:css属性名1，css属性名2.....；
默认值all，代表所有属性多可以过渡
只设置过渡属性名，是没有效果的，需要配合过渡时长使用
多个属性同时过渡时，中间使用逗号隔开

transition-duration：

设置过渡的时长
语法： transiton-duration:时间；
时间需要带单位， s代表秒 ms代表毫秒，可以是小数 1s=1000ms，默认0s
如果过渡的属性名多于过渡的时间个数时，时间重复一遍
多个时间之间使用逗号隔开

transition-timing-function：

设置过渡的速率

属性值：

ease：以低速开始，然后变快，在结束前变慢
linear：匀速
ease-in:以低速开始
ease-out：以低速结束
ease-in-out:以低速开始和结束
cubic-bezier();：贝塞尔曲线

贝赛尔曲线：

是一种用于构建二维图形的速度曲线，本质是一个数学曲线

作用：在css中，贝塞尔曲线用来定义的动画的速度曲线

语法： cubic-bezier(x1,y1,x2,y2);

注意：这两个坐标用于控制曲线的形状，不同形状所对应的速度不一样，甚至可以为负数

构建贝塞尔曲线：cubic-bezier.com

transition-delay：

设置过渡的延迟时间，也就是过渡效果何时开始，默认为0s

transition：

复合属性

语法：

transition: 属性名过渡时长过渡的延迟速度
多个属性过渡，中间使用逗号隔开
transition：属性名1 过渡时长过渡的延迟速度，属性名2 过渡时长过渡延迟速度；

特别注意：两个时间，前面代表过渡时长，后面代表延迟时间

注意：transition针对display没有效果

兼容性问题：

IE 10+、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释：IE 10 以下版本，不支持 transition 属性。
注释：Chrome 25 以下版本，需要前缀 -webkit-。

可以过渡的属性：

所有数值类型的属性，比如：width、height、left、top、border-radius...
背景颜色和文字颜色
所有变形：3D、2D

示例：

 .container {
            width: 100px;
            height: 100px;
            background: red;
            transition: all 1s;
            /* transition-timing-function: ease-in-out; */
            transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435);
            /* transition-delay: 1s; */
            /*
            
            */
        }
        
        .container:hover {
            width: 800px;
            background: green;
        }

 <div class="container"></div>

2.2 keyframe关键帧动画

相当于多个补间动画

与元素状态的变化无关

定义更加灵活

animation：

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期（用法与transition-timing-function类似）：ease：默认值低速开始，然后变快，以低速结束；linear：匀速；ease-in；ease-out；ease-in-out；cubic-bezier（x1，y1，x2，y2）
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数；取值为n，也就是具体多少次或者infinite也就是无限次
animation-direction 指定是否应该轮流反向播放动画；取值：normal（正常，默认值）/reverse（动画反向播放）/alternate(动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放)/alternate-reverse(动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放)/initial(设置该属性为它的默认值)/inherit(从父元素继承该属性)
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式：forwards:将最后一帧作用在元素上；backwards:恢复初始设置；both:将第一帧和最后一帧同时作用在元素上
animation-play-state 指定动画是否正在运行或已暂停；取值：paused暂停 | running正常播放

符合属性：

animation: name duration timing-function delay iteration-count direction fill-mode;

示例：

.container {
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s linear;
            /* animation-direction: reverse; */
            /* animation-fill-mode: forwards; */
            animation-iteration-count: infinite;
            /* animation-play-state: paused; */
        }
        
        @keyframes run {
            0% {
                width: 100px;
            }
            50% {
                width: 800px;
            }
            100% {
                width: 100px;
            }
        }

 <div class="container"></div>

2.3 逐帧动画

逐帧动画其实是属于关键帧动画的一个特殊的用法

特点：

适用于无法补间计算的动画
资源较大
使用steps()

注意：

适用于动画的面积比较小

动画本身的时长不是太大

示例：

.container {
            width: 100px;
            height: 100px;
            margin: 200px;
            /* border: 1px solid red; */
            background: url(./animal.png) no-repeat;
            animation: run 1s infinite;
             /*steps(n)，指定关键帧之间有几个画面*/
            animation-timing-function: steps(1);
        }
        
        @keyframes run {
            0% {
                background-position: 0 0;
            }
            12.5% {
                background-position: -100px 0;
            }
            25% {
                background-position: -200px 0;
            }
            37.5% {
                background-position: -300px 0;
            }
            50% {
                background-position: 0 -100px;
            }
            62.5% {
                background-position: -100px -100px;
            }
            75% {
                background-position: -200px -100px;
            }
            87.5% {
                background-position: -300px -100px;
            }
            100% {
                background-position: 0 0;
            }
        }

 <div class="container"></div>

原图：

三、2D

css3提供了transform属性来处理盒子（html标签）的转换，包含位移、旋转、缩放、倾斜等转换

2d转换一般会和过渡transition配合使用

特点：转换后不会影响其他元素

注意：2d转换针对行内元素没有效果，针对块级元素和行内块级元素才有效

3.1 旋转变形--rotate(ndeg)

transform:rotate(ndeg); n=-360deg~~360deg

语法：

transform : rotate(旋转角度)；
transform : rotate(30deg); //盒子以自身中心点为基点，顺时针沿轴旋转30度
transform : rotateX(30deg); //盒子以自身中心点为基点，顺时针沿x轴旋转30度
transform : rotateY(30deg); //盒子以自身中心点为基点，顺时针沿y轴旋转

若角度为正，则顺时针方向旋转，否则逆时针方向旋转

可以使用 transform-origin 属性设置自己的自定义变换原点

示例：

* {
            padding: 0;
            margin: 0;
        }
        
        .box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: #f40;
            line-height: 100px;
            transform-origin: 0 0;
            transform: rotate(45deg);
        }
        
        .box p {
            text-align: center;
            font-size: 50px;
            font-weight: 900;
            transform: rotate(-225deg);
        }

<div class="box">
  <p>福</p>
</div>

3.2 缩放变形--scale(n)

transform:scale(n);

语法：

transform：scale（宽度的倍数，高度的倍数）;
transform：scale（倍数）; //等比缩放
transform：scale（1.1，1.3）;

注意：

如果只带一个参数，表示X和Y都缩放一样的倍数

当数值小于1时，表示缩小元素；大于1时表示放大元素

示例：

.box {
       margin: 100px auto;
       width: 100px;
       height: 100px;
       border: 1px solid #ccc;
       background-color: #f40;
     }
        
.box:hover {
        /* transform: rotateY(45deg) scale(1.2);
           transform: rotateX(45deg) scale(1.2); */
       transform: rotate(45deg) scale(1.2);
    }

<div class="box"></div>

3.3 斜切变形--skew()

通过skew属性进行盒子沿着x轴或者y轴进行倾斜转换

语法：

transform : skew(角度);
transform : skew(45deg); //沿着x轴进行倾斜45deg
transform : skewX(45deg); //沿着x轴进行倾斜45deg
transform : skewY(45deg); //沿着y轴进行倾斜45deg

注意：

如果只带一个参数，表示X轴

角度越大，越接近x轴或者y轴，当角度为90deg的倍数时，会x轴或者y轴平行，消失不见

示例：

 .box {
        margin: 100px auto;
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        background-color: #f40;
        }
        
.box:hover {
    transform: rotate(45deg) scale(1.2) skew(20deg);
  }

<div class="box"></div>

3.4 位移变形--translate()

语法：

tansform : translate(x轴移动量，Y轴移动量);
tansform : translate(x轴移动量);
tansform : translateX();
tansform : translateY();

例子：
transform : translate(100px,50px); //X轴向右移动100px，Y轴向下移动50px

盒子以原来的位置为起点，进行移动

可以设置负值

3.5 调整元素的基点--origin

基点就是2D转换时参考的点，通过transform-origin来控制参考点

transform-origin: x-axis y-axis z-axis;

语法：

transform-origin:x y; x代表x轴上的取值，y代表y轴上的取值

属性值：

x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%，px

y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%，px

z-axis ：定义视图被置于 Z 轴的何处。可能的值：length，px

注意：

转换的基点需要在转换之前确定，否则浏览器解析会出问题
转换基点，针对位移是没有影响的，因为位移是参考原来的位置进行移动
针对于缩放和旋转以及倾斜是有影响的，因为这两个是参考点进行变换，默认参考中心点，改变了基点，效果也会发生变化

示例：

.box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: #f40;
        }
        
        .box:hover {
            transform: translate(10px) rotate(45deg) scale(1.2) skew(20deg);
            /* 以左上角为旋转点 */
            transform-origin: left top;
        }

<div class="box"></div>

转换的组合使用:

每种转换之间使用空格隔开

注意：

旋转会改变x轴和y轴的方向，会影响位移的方向
使用过程中根据需要，确定是先旋转还是先位移
transform: 位移缩放倾斜旋转;

四、3D

css3提出的3D技术是2D的补充，在平面基础上，增加了z轴，构建了三维坐标系

在css的三维坐标系中，x轴的正方向是水平向右，y轴的正方向是垂直向下，z轴垂直屏幕向外

注意：在3D里前面2D里的 translate、rotate、scale、transform-origin这些都是可以共用的，除了斜切（skew）

有了三维坐标系，就可以确定3D空间的任意位置，可以用（x,y,z）确定空间里任意一个位置

4.1 景深

在摄像中，景深是指相机对焦点前后相对清晰的成像范围，即镜头和物体之间距离。
在开发中我们将景深转化为当前物体在z轴上的显示距离。z轴上的0取值刚好在屏幕上
景深：近大远小
通过perspective设置盒子和屏幕之间距离，即景深；景深越大，物体（盒子）距离屏幕越远，效果越小；景深越小，盒子距离屏幕越近
一旦设置了景深，物体的运动会遵循近大远小的效果

特点：

景深给父盒子设置，子元素会以3d的形式展示，可以实现近大远小的效果
景深值越大，3d效果越小，景深越小，3d效果越大
景深是搭配3d转换一起使用的

4.2 透视效果--perspective

设置景深：perspective:length|none;

近大远小即值越小越大

主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位

<style>
    .box{
        width: 500px;
        height: 300px;
        border: 1px solid red;
        margin: 100px auto;
        /* 设置景深 */
        perspective: 1000px;
    }
    .box div{
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 50px auto;
        transition: 10s;
    }
    .box div:hover{
        transform: rotateY(360deg);
    }
</style>
<div class="box">
    <div></div>
</div>

4.3 3D效果--transform-style

在3D空间中呈现被嵌套的元素(必须与 transform 属性一同使用)

设置嵌套的元素在3D空间里呈现3D效果

transform-style: flat|preserve-3d;

flat：默认，代表所有的子元素在2d平面显示
preserve-3d：代表所有的子元素在3d空间里显示
结合景深来实现3D效果

示例，

.box {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: #f40;
            transform: rotateY(60deg);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: perspective-3d;
            -ms-transform-style: perspective-3d;
            transform-style: preserve-3d;
        }

<div class="box"></div>

4.4 3D旋转

只有位移。缩放和旋转有效

旋转：

先确定旋转轴，再确定旋转的角度

语法：

指定x轴为旋转轴
tranform：rotateX（角度）
y轴为旋转轴
transform：rotateY（角度）
z轴为旋转轴
transfrom：rotateZ（角度）
旋转的函数：按照指定的轴进行旋转
transfrom：rotate3d（x,y,z,角度）;

x,y,z确定了页面中一个点，原点与这个点的连线就是旋转轴
x:表示是否有x轴旋转，值0~1
y:表示是否有y轴旋转，值0~1
z:表示是否有z轴旋转，值0~1

旋转轴：原点到指定的点的连线就是旋转轴，这个点分别垂直三个面对点

位移：

语法：

transform:translateZ(z轴的移动量)；
复合属性：
transfrom：translate3d（x,y,z）
x,y,z分别代表x轴、y轴、z轴的移动量

z轴更改会影响物理距离屏幕的距离，会实现近大远小的效果；z轴为正值，伸出屏幕外，为负值，往屏幕里面移动。

缩放：

语法：

transform:scaleX(x); //x轴缩放的比例
transform:scaleY(y); //y轴缩放的比例
transform:scaleZ(z); //z轴缩放的比例
transfrom:scale3d(x,y,z) //x,y,z轴的缩放比例(通常搭配旋转复合属性使用可以观察到厚度的变化)

z轴进行缩放，控制的元素的厚度，一般看不到效果

示例：

* {
    padding: 0;
    margin: 0;
  }
        
p {
     width: 100px;
     height: 100px;
     border: 1px solid #000;
     background-color: #f40;
   }
        
.box {
       margin: 100px auto;
       width: 102px;
       height: 102px;
       border: 1px solid #000;
       /* 透视强度 */
       perspective: 50px;
   }
        
.box p {
         transform: rotateX(30deg);
     }

<div class="box">
     <p></p>
</div>

4.5 perspective-origin 灭点

设置视线的观察位置（灭点）（设置3d盒子的观察位置，默认是正对盒子）
灭点：在动画里面去找到视线的消失点
作用：让用户以不同的角度去查看3D盒子
设置在父元素上

语法：

perspective-origin:x轴 y轴；

取值：px、百分比、方向单词（left 、right 、top、bottom、center）
默认值：center center 元素的中心位置，看到的元素默认是对称

注意：这个属性设置在大盒子上（设置了景深的盒子）

4.6 空间移动

示例，

* {
            margin: 0;
            padding: 0;
        }
        
        p {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: orange;
        }
        
        .box1 {
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            margin: 50px auto;
            perspective: 300px;
        }
        
        .box1 p {
            transform: rotateX(30deg) translateX(100px) translateY(100px) translateZ(100px);
        }

<div class="box1">
   <p></p>
</div>

4.7 综合案例

 * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
            perspective: 300px;
            position: relative;
        }
        
        .box p {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        
        .box p:nth-child(1) {
            background-color: rgba(219, 56, 211, 0.486);
            /* 前面 */
            transform: translateZ(100px);
        }
        
        .box p:nth-child(2) {
            background-color: rgba(42, 128, 199, 0.486);
            /* 顶面 */
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .box p:nth-child(3) {
            background-color: rgba(56, 219, 83, 0.486);
            /* 背面 */
            transform: rotateX(180deg) translateZ(100px);
        }
        
        .box p:nth-child(4) {
            background-color: rgba(213, 216, 32, 0.486);
            /* 底面 */
            transform: rotateX(-90deg) translateZ(100px);
        }
        
        .box p:nth-child(5) {
            background-color: rgba(236, 82, 102, 0.486);
            /* 侧面 */
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .box p:nth-child(6) {
            background-color: rgba(119, 17, 236, 0.486);
            /* 侧面 */
            transform: rotateY(-90deg) translateZ(100px);
        }

<div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
</div>

小白小白从不日白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS3--属性前缀、新增选择器、文本属性、边框属性、背景属性、精灵技术(雪碧图)、线性渐变、径向渐变、栅格系统、多列、字体图标、滑动门、动画、2D和3D

一、新增属性和选择器1.1 属性前缀对于CSS3的一些语法，并不是所有浏览器或者同一浏览器都支持，因此需要兼容处理，通常的做法就是加厂商前缀1.2 新增选择器1.3 文本属性a.text-shadow：文本阴影主流浏览器都支持 h1 { text-align: center; text-shadow: 5px 5px 5px #ff0000; }<h1>text-shadow&...
复制链接

扫一扫