css 变形（transform）

1.transform

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>变形</title>
 6         <style>
 7             
 8             .box1{
 9                 width: 200px;
10                 height: 200px;
11                 background-color: #bfa;
12                 
13                 /* 
14                  
15                     变形，通过变形可以对元素进行平移、放大、缩小旋转等操作
16                         所有的变形效果，都不会影响页面的布局，这是元素的外观发生变化
17                     使用transform 来设置变形的效果
18                  */
19                 /* 
20                     平移
21                         translateX 沿着x轴平移
22                             - 正值元素向右移动，负值向左移动（元素没有发生旋转）
23                         translateY 沿着y轴平移
24                             - 正值元素向下移动，负值元素向上移动（元素没有发生旋转）
25                 */
26                
27                transition: all .2s;
28                 
29             }
30             
31             .box1:hover{
32                 /* transform: translateY(-10px); */
33                 /* box-shadow: rgba(0,0,0,.3) 0 10px 10px; */
34                 
35                 /* 平移时百分比的单位是相对于自身进行计算的 */
36                 transform: translateX(50%);
37             }
38             
39             .box2{
40                 width: 200px;
41                 height: 200px;
42                 background-color: tomato;
43             }
44             
45             
46             .box3{
47                 
48                 position: absolute;
49                 background-color: greenyellow;
50                 
51                 left: 50%;
52                 top:50%;
53                 transform: translateX(-50%) translateY(-50%);
54             }
55         </style>
56     </head>
57     <body>
58         
59         <!-- <div class="box1"></div> -->
60         <!-- 
61         <div class="box2"></div> -->
62         
63         <div class="box3">我是一个box3</div>
64         
65         
66     </body>
67 </html>

 

旋转（rotate）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
            html{
                perspective: 800px;
            }
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                margin: 50px auto;
                
                transition: all 2s;
                /* transform: translateZ(100px) rotateY(45deg) ; */
            }
            
            .box1:hover{
                /* 
                    rotateX() 表示元素沿着X轴旋转
                        deg 表示度数
                        turn 表示圈
                        
                    rotateY 表示元素沿着Y轴旋转
                    rotateZ 表示元素沿着Z轴旋转
                 */
                /* transform: rotateX(10turn); */
                /* transform: rotateY(1turn) rotateX(1turn); */
                /* transform: rotateZ(10turn); */
                
                transform: translateZ(100px) rotateY(45deg) ;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: greenyellow;
                margin: 50px auto;
                
                transition: all 2s;
                
                /* transform: rotateY(45deg) translateZ(100px)  ; */
            }
            
            .box2:hover{
                transform: rotateY(45deg) translateZ(100px)  ;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box1"></div>
        <div class="box2"></div>
        
    </body>
</html>

 

内容；transform: rotateY(45deg) translateZ(100px)  ;   和transform: translateZ(100px) rotateY(45deg)  他们的顺序不一样，出来的效果也不一样。

 

变形的原点

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             html{
 8                 perspective: 800px;
 9             }
10             
11             .box1{
12                 width: 200px;
13                 height: 200px;
14                 margin: 100px auto;
15                 background-color: #bfa;
16                 transition: all 2s;
17                 
18                 /* 
19                     transform-origin 用来指定变形的原点
20                         - 和background-position设置方式是一致的,
21                  */
22                 /* transform-origin: top center;   九宫格样式*/
23                 transform-origin: 50px 20px;
24                 /* transform-origin: center center; */
25             }
26             
27             .box1:hover{
28                 transform: rotateX(90deg);
29             }
30             
31         </style>
32     </head>
33     <body>
34         
35         <div class="box1"></div>
36         
37     </body>
38 </html>

 

posted @ 2020-04-11 19:52  全情海洋  阅读(596)  评论(0)  编辑  收藏  举报