章节 (20) 2D转换模块

一. 2D转换模块

2D转换模块

/*其中deg是单位, 代表多少度*/
 transform: rotate(45deg);
/*
第一个参数:水平方向
第二个参数:垂直方向
*/
transform: translate(100px, 0px);
/*
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
*/
/*transform: scale(0.5, 0.5);*/
transform: scale(1.5);
/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
*/
transform: rotate(45deg) translate(100px, 0px);

2D转换模块

二. 2D转换模块-形变中心点

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

/*
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
*/
/*transform-origin: 200px 0px;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
/*transform-origin: center center;*/
transform-origin: left top;

形变中心点

三.透视属性(perspective: 500px;) 和 旋转轴向 (transform: rotateY(45deg);)

1.perspective: 500px;

1.1什么是透视

近大远小

1.2.注意点

一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

2.transform: rotateY(45deg);

想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可;

代码示例:

    
    
    



    
![](images/rotateZ.jpg)
    
![](images/rotateX.jpg)
    
![](images/rotateY.jpg)

透视属性 和 旋转轴向

四. 扑克牌练习

    
    
    



    ![](images/pk.png)

扑克牌

五. 照片墙

    
    
    



    
![](images/1.jpg)
    
![](images/2.jpg)
    
![](images/3.jpg)
    
![](images/4.jpg)

照片墙

六. 盒子阴影和文字阴影

1.如何给盒子添加阴影

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

2.注意点

2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致

.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
            /*box-shadow: 10px 10px 10px 10px skyblue;*/
            /*box-shadow: 10px 10px 10px 10px skyblue inset;*/
            box-shadow: 10px 10px 10px;
            color: yellow;
      }

盒子阴影

3.如何给文字添加阴影

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

.box2{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            /*text-shadow: 10px 10px 10px black;*/
            text-shadow: 10px 10px 10px;
            color: purple;
     }

文字阴影

七. 翻转菜单

    
    
    



    
一级菜单
        

            
二级菜单
            
二级菜单
            
二级菜单
            
二级菜单
            
二级菜单
        
    
    
一级菜单
        

            
二级菜单
            
二级菜单
            
二级菜单
            
二级菜单
            
二级菜单
        
    
    
一级菜单
        

            
二级菜单
            
二级菜单
            
二级菜单
            
二级菜单
            
二级菜单
        
    


我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文
字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是
文字我是文字我是文字我是文字

翻转菜单