18、2D转换模块

transform属性

作用：2D的模块转换

取值：transform:rotate(值deg) 旋转【旋转默认以自己的中心的为旋转点】

transform:translate(水平方向px，垂直方向px) 平移元素

transform:translate[Z/X/Y](偏移的量px)

transform:scale(水平放大的倍数，垂直放大的倍数) 缩放元素

综合：transform：rotate(值deg) translate(水平方向px，垂直方向px) scale(水平放大的倍数，垂直放大的倍数)；

注意：以旋转之后xy来平移

div{

width: 100px;

height: 100px;

background-color:red;

margin: 20px auto;

}

div:first-child{

transform:rotate(180deg);

}

div:nth-child(2){

transform:translate(100px,100px);

}

div:nth-child(3){

transform: scale(2,1);

}

div:nth-child(4){

transform:rotate(180deg) translate(100px,0px);

}

div:nth-child(5){

transform:translateY(100px);

}

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

transform-origin

作用：设置旋转的中心点

格式：transform-origin：水平方向，垂直方向；

取值：具体像素 transform-origin：0px 0px;

方向关键字 transform-origin：center center;

百分比 transform-origin：50% 50%;

transform:rotate[X/Y/Z](xxdeg);

作用：设置旋转的轴向

perspective

作用：旋转元素后为了看的明显【近大远小】 设置值越大表示离得越远

格式：perspective：值px;

注意：设置透视属性必须添加到需要呈现近大远小的元素的父元素上

盒子的阴影

格式：box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影

注意：1盒子的阴影分为内外阴影，默认情况下为外阴影

2快速的给盒子添加阴影只要三个参数【box-shadow:水平偏移 垂直偏移 模糊度】

3.默认情况下阴影的颜色和盒子的内容的颜色一致

4.模糊度值越低 越清楚 越高越模糊

div:first-child{

width: 100px;

height: 100px;

background-color:red;

margin: 100px auto;

border: 1px solid yellow;

box-shadow: 0px 0px 10px 0px green inset;

}

<div>123</div>

文字阴影

格式：text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色

注意：1快速的给文本添加阴影只需要三参数【text-shadow:水平偏移 垂直偏移 模糊度】

2默认情况下阴影的颜色和内容的颜色一致

div:last-child{

width: 100px;

height: 100px;

background-color:skyblue;

margin: 200px auto;

text-shadow:10px 10px 2px red;

}

<div>好好学习</div>