一, transform 属性
CSS3 的 transform 属性应用于元素的 2D 或 3D 转换. 这个属性允许将元素旋转, 缩放, 移动, 倾斜等.
语法: transform: transform-functions
值 | 描述 |
---|---|
none | 默认值,不进行转换 |
translate(x,y) | 定义 2D 位移 |
translate3d(x,y,z) | 定义 3D 位移 |
translateX(x) | 定义 X 轴的位移 |
translateY(y) | 定义 y 轴的位移 |
translateZ(z) | 定义 z 轴的位移 |
scale(x,y) | 定义 2D 缩放 |
scale3d(x,y,z) | 定义 3D 缩放 |
scaleX(x) | x 轴横向缩放 |
scaleY(y) | y 轴的竖向缩放 |
scaleZ(z) | 设置 z 轴的 3D 缩放 |
rotate(angle) | 定义 2D 旋转 |
rotateX(angle) | 定义沿着 x 轴的 3D 旋转 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转 |
skew(x-angle,y-angle) | 定义沿着 x 轴和 Y 轴的 2D 倾斜转换 |
skewX(angle) | 定义沿着 x 轴的 2D 倾斜转换 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换 |
perspective(n) | 为 3D 转换定义透视视图,用于设置用户和元素 3D 空间 Z 平面之间的距离,值越小,用户与 3D 空间 Z 平面距离越近,视觉效果会明显;反之,值越大,用户与 3D 空间 Z 平面距离越远,视觉效果越小 |
注: 转化的元素需是一个块元素才可以.
二, transform-origin 属性
transform-origin 属性是设置元素的 2D,3D 转换的原点位置, 与 transform 属性配合使用.
语法: transform-origin: x-axis y-axis z-axis;
值 | 描述 |
---|---|
50% 50% 0 | 默认值,元素的中心点 |
x-axis | 定义原点在 x 轴的位置,可能的值 left,right,center,%,length |
y-axis | 定义原点在 y 轴的位置,可能的值 top,bottom,center,%,length |
z-axis | 定义原点在 z 轴的位置,可能的值 length |
三, transform-style 属性
transform-style 属性指定嵌套元素是怎样在三维空间中呈现.
语法: transform-style: flat | preserve-3d;
值 | 描述 |
---|---|
flat | 表示所有子元素在 2D 平面呈现 |
preserve-3d | 表示所有元素在 3D 空间中呈现 |
示例:
代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body{
- padding: 40px;
- }
- .parent{
- width:800px;
- height: 400px;
- margin: 0 auto;
- border: 1px solid black;
- }
- .child{
- position: relative;
- height: 100%;
- border:1px solid #D8D8D8;
- transform: perspective(1000px) rotateX(-20deg) rotatey(0deg);
- transform-style: preserve-3d;
- }
- .child div{
- width: 100px;
- height: 100px;
- position: absolute;
- top:150px;
- left:350px;
- }
- .child div:nth-child(1){
- background-color: red;
- transform: rotateY(0deg) translateZ(200px);
- }
- .child div:nth-child(2){
- background-color: green;
- transform: rotateY(60deg) translateZ(200px);
- }
- .child div:nth-child(3){
- background-color: blue;
- transform: rotateY(120deg) translateZ(200px);
- }
- .child div:nth-child(4){
- background-color: yellow;
- transform: rotateY(180deg) translateZ(200px);
- }
- .child div:nth-child(5){
- background-color: gray;
- transform: rotateY(240deg) translateZ(200px);
- }
- .child div:nth-child(6){
- background-color: pink;
- transform: rotateY(300deg) translateZ(200px);
- }
- </style>
- </head>
- <body>
- <div class='parent'>
- <div class='child'>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- </div>
- </div>
- </body>
- </html>
四, box-shadow
box-shadow 属性向元素添加一个或多个阴影, 由逗号分隔阴影列表.
语法: box-shadow:x-shadow y-shadow blur spread color inset;
值 | 描述 |
---|---|
x-shadow | 必需,水平阴影的位置,允许负值 |
y-shadow | 必需,垂直阴影的位置,允许负值 |
blur | 可选,模糊距离 |
spread | 可选,阴影的尺寸 |
color | 可选,阴影的颜色 |
inset | 可选,将外部阴影 (outset) 改为内部阴影 |
五, 单边阴影
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body{
- padding: 40px;
- }
- div{
- height: 100px;
- width: 100px;
- border: 1px solid #D8D8D8;
- box-shadow:
- -10px 0 10px 0 red ,/* 左边阴影 */
- 10px 0 10px 0 blue,/* 右边阴影 */
- 0 -10px 10px 0 yellow,/* 顶部阴影 */
- 0 10px 10px 0 green;/* 底部阴影 */
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
给元素四边设置阴影效果, 是通过改变 x-shadow 和 y-shadow 来实现的, x-shadow 为负值时生成左边阴影, 为正值时生成右边阴影. y-shadow 为负值生成顶部阴影, 为正值生成底部阴影.
六, 阴影层叠
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body{
- padding: 40px;
- }
- div{
- height: 100px;
- width: 100px;
- border: 1px solid #D8D8D8;
- box-shadow: 0 0 10px 5px red,0 0 20px 10px blue;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
当给同一个元素使用多个属性时, 最先写的阴影将显示在最上面. 如果后面的阴影尺寸或模糊距离比前面的小, 将会看不到后面的阴影.
例如上面的例子写成这样:
- div{
- height: 100px;
- width: 100px;
- border: 1px solid #D8D8D8;
- box-shadow: 0 0 10px 5px red,0 0 10px 5px blue;
- }
就会看不到蓝色的阴影, 会显示成这样:
来源: http://www.qdfuns.com/article/46690/b4a8c27fe7bcdb4f51dcdd5bf06be88e.html