17 - 变换,阴影,遮罩

最新推荐文章于 2021-06-02 14:27:41 发布

xyyojl

最新推荐文章于 2021-06-02 14:27:41 发布

阅读量386

点赞数

分类专栏： html+css 前端文章标签： 2D变换 3D变换遮罩

本文链接：https://blog.csdn.net/xyyojl/article/details/82730414

版权

前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

html+css

21 篇文章 0 订阅

订阅专栏

变换,阴影,遮罩

变换transform的种类
2D变换
3D变换
阴影
遮罩

2D变换

scale 整体缩放
translate 平移
skew 倾斜
transform-origin 变换基点
rotate 旋转
上面这些属性都分别都有x,y之分

scale()整体缩放

缩放到原来的n倍
大于1表示放大,0-1表示缩小
可以有两个值,scale(x,y)
可以有负数,反向缩放

translate平移

translate(x,y) 属性值第一个是X轴方向上,第二个是Y轴方向上
可以单独拆分为translateX()和translateY()
居中方式的改进:translate(-50%,-50%)

浏览器渲染原理

读取设置改变属性
计算(computed)最终属性
layout输出布局最终尺寸,可疑属性(position/margin)存在重排(reflow)
分层渲染绘制(7层层叠水平,叠加)
合并渲染

translate与定位的区别

修改position:存在可疑属性,破幻页面结构操作,改变页面所以会执行浏览器渲染原理1,2,3,4,5

修改translate:只会执行1,2,4,5没有影响其他元素

关键步骤3:整体页面牵一发动全身,position相当于每次设置都会整体计算一次,浪费性能

skew 倾斜

skew(x,y) 水平方向向上拉伸,竖直方向上拉伸
可以分解skewX()和skewY()
倾斜skew的值(度数deg),可支持负值

transform-origin 变换基点

默认 center
关键词: top/left/right/bottom
像素px,参照background-origin

rotate 旋转

deg表示度数
顺时针是增大,逆时针是减少

张鑫旭大神的CSS3 2D transform 720度缩放旋转效果实例页面

3D变换transform

transform-style(必须加)

当transform-style: preserve-3d使子元素有3d的位置,在控制父元素*3d变换的时候可以看到子元素的3d效果,转换为3D元素*

透视perspective

数值,默认是px单位,表示站在多元的位置看,给哪个元素加就是在哪个元素的基础上看

3D旋转rotate

rotateX() 水平方向为X轴,表现为上下转
rotateY() 竖直方向为Y轴,表现为左右转
rotateZ() 垂直屏幕为Z轴,表现为顺逆时针

增加属性值

rotateZ() z轴旋转
scaleZ() z轴缩放
translateZ() z轴位移
skewZ() 在z轴上的倾斜

阴影

盒子阴影

给盒子添加阴影的表现效果,好像有光打到盒子上,和原盒子一样大小,包含border

可以用逗号分隔,类似于背景渐变,可叠加

box{
    box-shadow: h-shadow v-shadow blur spread color;
    /* box-shadow: 阴影水平偏移 阴影竖直偏移 模糊半径 阴影缩放 颜色 内外阴影模式 */
}

h-shadow,v-shadow

长度单位(px等等)

blur模糊半径

模糊半径:阴影由完全的颜色到消失的长度,类似于渐变的长度.默认是0,值越大越模糊

spread 阴影缩放

单位px,整数表示放大,负数表示缩小,默认是0

color 阴影颜色

inset/outset

inset 内阴影
outset 外阴影(默认)
不遮挡文字,遮挡盒子和背景

效果图:

这里写图片描述

例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小demo - 盒子阴影 </title>
    <style>
        body{
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin-top: 50px;
            margin-left: 50px;
            background-color: red;
        }
        div:hover{
            box-shadow: 0 0  10px 0px #000;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

文字阴影

水平偏移
竖直偏移
模糊半径
颜色
类似于box-shadow,但是不支持缩放和内外阴影,可叠加逗号分隔

效果图

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小demo - 文字阴影 </title>
    <style>
        body,h1{
            margin: 0;  
        }
        h1{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            background-color: rgb(108, 250, 252);
            color: #fff;
            text-align: center;
            line-height: 200px;
            text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <h1>海贼王</h1>
</body>
</html>