• 慕课前端入门-CSS转换

    1. transform

    操作属性说明示例
    旋转rotate(angle) 2D旋转指定元素按照给定的角度旋转，正数顺时针旋转，负数逆时针旋转transform: rotate(7deg);
    rotateX(angle) 3D旋转指定对象在X轴(水平方向)上的旋转
    不用理会逆时针旋转，还是顺时针旋转，结果一样    		transform:rotateX(45deg);
    rotateY(angle) 3D旋转指定对象在Y轴(垂直方向)上的旋转
    不用理会逆时针旋转，还是顺时针旋转，结果一样    		transform:rotateY(25deg);
    rotateZ(angle) 3D旋转指定对象在Z轴(垂直屏幕的方向)上的旋转角度，效果同2D旋转transform:rotateZ(35deg);
    rotate3d(x,y,z,angle) 3D旋转指定对象的3D旋转角度
    前3个参数分表表示旋转的方向的比重
    第4个参数表示旋转的角度，参数不允许省略

    X轴旋转角度：$frac{x^{2}}{x^{2}+y^{2}+z^{2}}*angle$

    Y轴旋转角度：$frac{y^{2}}{x^{2}+y^{2}+z^{2}}*angle$

    Z轴旋转角度：$frac{z^{2}}{x^{2}+y^{2}+z^{2}}*angle$

    		transform:rotate3d(1,2,1,23deg);
    平移translateX(x)仅水平方向移动transform: translateX(50px);
    translateY(y)仅竖直方向移动transform: translateY(50px);
    translate(x,y)水平方向和竖直方向同时移动
    只传一个参数，y默认0，对象只在水平方向移动    		transform: translate(50px,50px);
    translateZ(x)指定对象Z轴的平移，用于遮罩。
    单个对象看不出效果    		transform:translateZ(50px);
    translate3d(x,y,z)指定对象的3D位移
    参数依次对应X轴、Y轴、Z轴，参数不允许省略    		transform:translate3d(10px,20px,30px);
    缩放scaleX(x)元素仅X轴(水平方向)缩放transform: scaleX(0.6);
    scaleY(y)元素仅Y轴(垂直方向)缩放transform: scaleY(0.5);
    scale(x,y)元素水平方向和垂直方向同时缩放。如果只有1个值，就是等比例缩放transform:scale(.5, .3)
    scaleZ(z)指定对象Z轴的缩放，即厚度发生变化。但在平面上看不出来transform:scaleZ(.5);
    scale3d(x,y,z)指定对象的3D缩放，参数依次对应X、Y、Z，不允许省略。transform:scale3d(.5, .5, .5)
    扭曲或斜切skewX(angle)指定元素在水平方向(X轴)扭曲变形
    X轴正值逆时针斜切；负值顺时针斜切    		transform: skewX(15deg);
    skewY(angle)指定元素在垂直方向(Y轴)扭曲变形
    Y轴正值顺时针斜切；负值逆时针斜切    		transform: skewY(15deg);
    skew(angle,angle)指定元素在水平方向(X轴)和垂直方向(Y轴)扭曲变形
    只传1个参数，第二个参数默认0    		transform: skew(15deg, 45deg);
    3d里面没有斜切
    位置transform-origin允许更改转换元素的位置
    transform-origin有两个方向的在属性值。
    x-axis：定义视图被置于 X 轴的何处。
    可能的值：left、center、right、length、%
    y-axis：定义视图被置于 Y 轴的何处。
    可能的值：top、center、bottom、length、%。    		transform-origin: right top;表示的是右上角。
    transform-origin:left 25%;

    1.1 rotate方法

    transform属性引入rotate函数，通过指定的角度参数对原元素实现2D旋转。

    transform: rotate(<angle>);
/*参数说明：
      angle值旋转角度，整数表示顺时针旋转，负数表示逆时针旋转
*/

    示例

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>重复的彩虹</title>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style-type: none;}
        .main{1200px;margin:50px 50px;}
        .pic{ 300px;height: 290px;border:1px solid #ccc;background: #fff;box-shadow: 2px 2px 3px #aaa;float: left;overflow: hidden;}
        .pic img{margin:10px 0 0 8px; 285px;}
        .pic1{
        	-webkit-transform:rotate(7deg);
        	   -moz-transform:rotate(7deg);
        	    -ms-transform:rotate(7deg);
        	     -o-transform:rotate(7deg);
        	       transform: rotate(7deg);
        }
        .pic2{
        	-webkit-transform:rotate(-8deg);
        	   -moz-transform:rotate(-8deg);
        	    -ms-transform:rotate(-8deg);
        	     -o-transform:rotate(-8deg);
        	       transform: rotate(-8deg);
        }    
        .pic3{
        	-webkit-transform:rotate(-35deg);
        	   -moz-transform:rotate(-35deg);
        	    -ms-transform:rotate(-35deg);
        	     -o-transform:rotate(-35deg);
        	       transform: rotate(-35deg);
        }    
        .pic4{
        	-webkit-transform:rotate(35deg);
        	   -moz-transform:rotate(35deg);
        	    -ms-transform:rotate(35deg);
        	     -o-transform:rotate(35deg);
        	       transform: rotate(35deg);
        }    
        .pic5{
        	-webkit-transform:rotate(60deg);
        	   -moz-transform:rotate(60deg);
        	    -ms-transform:rotate(60deg);
        	     -o-transform:rotate(60deg);
        	       transform: rotate(60deg);
        }    
        .pic6{
        	-webkit-transform:rotate(-60deg);
        	   -moz-transform:rotate(-60deg);
        	    -ms-transform:rotate(-60deg);
        	     -o-transform:rotate(-60deg);
        	       transform: rotate(-60deg);
        }           
    </style>      
</head>
<body>
<div class="main">
	<div class="pic pic1"><img src="suolong.jpeg"></div>
	<div class="pic pic2"><img src="namei.jpeg"></div>
	<div class="pic pic3"><img src="yingyan.jpeg"></div>
	<div class="pic pic4"><img src="suolong.jpeg"></div>
	<div class="pic pic5"><img src="namei.jpeg"></div>
	<div class="pic pic6"><img src="yingyan.jpeg"></div>
</div>    
</body>
</html>

    1.2 translate平移

    transform: translateX(x);/* 仅水平方向移动 */
transform:translateY(y);/* 仅竖直方向移动 */
transform:translate(x,y);/* 水平方向和竖直方向同时移动 */

    示例

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>重复的彩虹</title>
    <style type="text/css">
        div{ 350px;height: 250px;background: #abcdef;margin:auto;border: 1px solid red;float: left;overflow: hidden;}
        div>img.pic1{
        	height: 200px;
        	border:1px solid blue;
        	-webkit-transform:translateX(50px);
        	   -moz-transform:translateX(50px);
        	    -ms-transform:translateX(50px);
        	     -o-transform:translateX(50px);
        	       transform: translateX(50px);
        }

        div>img.pic2{
        	height: 200px;
        	border:1px solid green;
        	-webkit-transform:translateY(50px);
        	   -moz-transform:translateY(50px);
        	    -ms-transform:translateY(50px);
        	     -o-transform:translateY(50px);
        	       transform: translateY(50px);
        }

        div>img.pic3{
        	height: 200px;
        	border:1px solid navy;
        	-webkit-transform:translate(50px,50px);
        	   -moz-transform:translate(50px,50px);
        	    -ms-transform:translate(50px,50px);
        	     -o-transform:translate(50px,50px);
        	       transform: translate(50px,50px);
        }
            
    </style>      
</head>
<body>
	<div><img class="pic1" src="suolong.jpeg"></div>
	<div><img class="pic2" src="suolong.jpeg"></div>
	<div><img class="pic3" src="suolong.jpeg"></div>
</body>
</html>

    1.3 scale缩放

    /* 1是100%，大于1，放大；小于1，缩小*/
transform:scaleX(x);/* 元素仅水平方向缩放 */
transform:scaleY(y);/* 元素仅垂直方向缩放 */
transform:scale(x, y);/* 元素水平方向和垂直方向同时缩放。如果只有1个值，就是等比例缩放 */

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>重复的彩虹</title>
    <style type="text/css">
        div{background: #abcdef;margin:auto;border: 1px solid red;}
        img.pic1{
        	 500px;
        	border:1px solid blue;
        	-webkit-transform:scaleX(0.5);
        	   -moz-transform:scaleX(0.5);
        	    -ms-transform:scaleX(0.5);
        	     -o-transform:scaleX(0.5);
        	       transform: scaleX(0.6);
        }

        img.pic2{
        	/*height: 200px;*/
        	border:1px solid green;
        	-webkit-transform:scaleY(0.5);
        	   -moz-transform:scaleY(0.5);
        	    -ms-transform:scaleY(0.5);
        	     -o-transform:scaleY(0.5);
        	       transform: scaleY(0.5);
        }

        img.pic3{
        	/*height: 200px;*/
        	border:1px solid navy;
        	-webkit-transform:scale(0.5,1.5);
        	   -moz-transform:scale(0.5,1.5);
        	    -ms-transform:scale(0.5,1.5);
        	     -o-transform:scale(0.5,1.5);
        	       transform: scale(0.5,1.5);
        }
            
    </style>      
</head>
<body>
<div><img class="pic1" src="suolong.jpeg"></div>
<div><img class="pic2" src="suolong.jpeg"></div>
<div><img class="pic3" src="suolong.jpeg"></div>
</body>
</html>

    1.4 skew扭曲或斜切

    transform:skewX(angle);/* 使元素在水平方向扭曲变形。正角度，逆时针斜切；负角度，顺时针斜切 */
transform:skewY(angle);/* 使元素在垂直方向扭曲变形。正角度，顺时针斜切；负角度，逆时针斜切 */
transform:skew(angle,angle);/* 使元素在水平和垂直方向扭曲变形 。一个参数时，垂直斜切为0 */

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        div{ 350px;height: 300px;padding: 100px 0 0 100px;float:left;overflow: hidden;}
        img{}
        img.pic1{
        	 100px;
        	border:1px solid blue;
        	-webkit-transform:skewX(45deg);
        	   -moz-transform:skewX(45deg);
        	    -ms-transform:skewX(45deg);
        	     -o-transform:skewX(45deg);
        	       transform: skewX(45deg);
        }

        img.pic2{
        	 100px;
        	border:1px solid green;
        	-webkit-transform:skewY(45deg);
        	   -moz-transform:skewY(45deg);
        	    -ms-transform:skewY(45deg);
        	     -o-transform:skewY(45deg);
        	       transform: skewY(45deg);
        }

        img.pic3{
        	 100px;
        	border:1px solid navy;
        	-webkit-transform:skew(45deg);
        	   -moz-transform:skew(45deg);
        	    -ms-transform:skew(45deg);
        	     -o-transform:skew(45deg);
        	       transform:skew(45deg);
        }
            
    </style>      
</head>
<body>
<div><img class="pic1" src="suolong.jpeg"></div>
<div><img class="pic2" src="suolong.jpeg"></div>
<div><img class="pic3" src="suolong.jpeg"></div>
</body>
</html>

    2. CSS矩阵

    可以理解为方阵，书写为matrix()和matrix3d()
    matrix()是元素2D平面的移动变换(transform),2D变换矩阵为33
    matrix3d()是元素3D的移动变换(transform),3D变换矩阵是4    4

    2.1 2D方阵

    $egin{bmatrix} a & c & e\ b & d & f\ 0 & 0 & 1 end{bmatrix}*egin{bmatrix} x \ y \ 1 end{bmatrix}=egin{bmatrix} ax+cy+e\ bx+dy+f\ 1 end{bmatrix}$

    transform:matrix(a,b,c,d,e,f)。中心点是(x,y)，得到一个1*3的矩阵。

    • ax+by+e：为变换后的水平坐标
    • bx+dy+1：为变换后的垂直坐标
    • 1：为变换后的Z轴坐标
    操作属性说明示例
    旋转transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)等同于transform: rotate(θdeg) transform: matrix(.7071, 0.7071, -0.7071, 0.7071, 0, 0);
    位移transform: matrix(1, 0, 0, 1, x, y)等同于transform: translate(x, y)transform: matrix(1, 0, 0, 1, 30, 30);
    缩放transform: matrix(sx, 0, 0, sy, 0, 0)等同于transform: scale(sx, sy)transform: matrix(.5, 0, 0, .5, 0, 0);
    扭曲或斜切transform: matrix(1, tanθy, tanθx, 1, 0, 0)等同于transform: skew(θxdeg, θydeg)
    镜像

    $matrix(frac{1-k^{2}}{1+k^{2}}, frac{2k}{1+k^{2}}, frac{2k}{1+k^{2}}, frac{k^{2}-1}{1+k^{2}}, 0, 0)$

    		transform: matrix(0, 1, 1, 0, 0, 0);

    2.2通过矩阵实现位移

    说明：transform:matrix(1,0,0,1,x,y) == transform:translate(x,y);
    transform:matrix(1,0,0,1,30,30);假设中心点是(0,0)

    $egin{bmatrix} 1 & 0 & 30\ 0 & 1 & 30\ 0 & 0 & 1 end{bmatrix}*egin{bmatrix} 0 \ 0 \ 1 end{bmatrix}=egin{bmatrix} 0+0+30\ 0+0+30\ 1 end{bmatrix}$

    即变换后的中心点为(30,30),整个元素发生了平移。
注意：matrix在火狐下需要添加单位；webkit内核默认px，translate等方法需要添加单位

    示例：
    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       div{ 1500px;height: 250px;background: #abcdef;margin:100px auto;border: 1px solid blue;}
       div:nth-child(1) >img{
            border: 1px solid red;
            transform: matrix(1,0,0,1,30,30);
        }
       div:nth-child(2) > img{
              border: 1px solid red;
            transform: translate(30px,30px);
        }
    </style>
</head>
<body>
<div><img src="wechat.jpeg"></div>
<div><img src="wechat.jpeg"></div>
</body>
</html>

    


    2.2.3 通过矩阵实现缩放
    

    matrix(sx, 0, 0, sy, 0, 0) == scale(sx, sy)
    

        <style type="text/css">
       div{ 1500px;height: 250px;background: #abcdef;margin:100px auto;border: 1px solid blue;}
       div:nth-child(1) >img{
            border: 1px solid red;
            transform: matrix(.5,0,0,.5,0,0);
        }
       div:nth-child(2) > img{
            border: 1px solid red;
            transform: scale(.5,.5);
        }
    </style>

    


    2.2.4 通过矩阵实现旋转
    

    矩阵matrix(cos Θ, sin Θ, -sin Θ, cos Θ, 0, 0); == rotate(matrix(Θ deg);
    

       <style type="text/css">
       div{ 1500px;height: 250px;background: #abcdef;margin:100px auto;border: 1px solid blue;}
       div:nth-child(1) >img{
            border: 1px solid red;
            transform: matrix(.7071,0.7071,-0.7071,0.7071,0,0);
        }
       div:nth-child(2) > img{
            border: 1px solid red;
            transform: rotate(45deg);
        }
    </style>

    

    

    2.2.5 通过矩阵实现缩放
    

        <style type="text/css">
       div{ 1500px;height: 250px;background: #abcdef;margin:100px auto;border: 1px solid blue;}
       div:nth-child(1) >img{
            border: 1px solid red;
            transform: matrix(1, .5774, .5774, 1, 0, 0);
        }
       div:nth-child(2) > img{
            border: 1px solid red;
            transform: skew(30deg, 30deg);
        }
    </style>

    

    

    2.2.6 通过矩阵实现镜像
    

    translate、rotate、scale、skew很直观，为什么还要看原生矩阵？
    
还有一些变换没有封装，此时仍然需要矩阵来实现，比如镜像
    

    

    k是斜率，是通过原点的直线的倾斜值即k=y/x
    

    div:nth-child(1) >img{
            border: 1px solid red;
            transform: matrix(0, 1, 1, 0, 0, 0);
        }

    

    2.2.7 3D矩阵
    

    使用3D矩阵实现缩放
    

    matrix3d(sx, 0, 0, 0,  
      0, sy, 0, 0,
      0, 0, sz, 0,
      0, 0, 0, 1);

    

    示例
    

        <style type="text/css">
       div{ 1500px;height: 250px;background: #abcdef;margin:100px auto;border: 1px solid blue;}
       div:nth-child(1) >img{
            border: 1px solid red;
            transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1);
        }
       div:nth-child(2) > img{
            border: 1px solid red;
            transform: scale3d(0.5, 0.5, 0.5);
        }
    </style>

    

    3. CSS3扩展属性
    

    3.1 transform-style
    

    指定嵌套元素怎样在三维空间中呈现
    
flat：默认值
    
preserve-3d：视觉上有嵌套环绕的感觉
    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       body{background:#abcdef;}
       div{position: relative; 760px;height: 760px;margin:auto;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
              -otransform-style: preserve-3d;
                transform-style: preserve-3d;
       }
       .common{position: absolute;top: 0;right: 0;bottom: 0;left: 0; 100%;height: 100%;margin:auto;}
       div.red{background:url(red.png) no-repeat center;transform: rotateY(-45deg);}
       div.blue{background:url(blue.png) no-repeat center;transform: rotateX(-45deg);}
       div.green{background:url(green.png) no-repeat center;transform: rotateZ(-45deg);}
       div.wechat{background:url(wechat.jpeg) no-repeat center;}
    </style>
</head>
<body>
<div>
    <div class="wechat"></div>
    <div class="red common"></div>
    <div class="blue common"></div>
    <div class="green common"></div>
</div>
</body>
</html>

    

    

    3.2 perspective
    

    perspective指定观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。
    
参数：
    

      

    • none默认
      • 

    • 数值
      • 

    

    perspective-origin：指定透视点的位置
    
参数：top bottom left right或指定x-axis y-axis，默认50% 50%
    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       body{background:#abcdef;}
       div{position: relative; 760px;height: 760px;margin:auto;
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
              -otransform-style: preserve-3d;
                transform-style: preserve-3d;
                perspective: 500px;
                perspective-origin: top;
       }
       .common{position: absolute;top: 0;right: 0;bottom: 0;left: 0; 100%;height: 100%;margin:auto;}
       div.red{background:url(red.png) no-repeat center;transform: rotateY(-45deg);}
       div.blue{background:url(blue.png) no-repeat center;transform: rotateX(-45deg);}
       div.green{background:url(green.png) no-repeat center;transform: rotateZ(-45deg);}
       div.wechat{background:url(wechat.jpeg) no-repeat center;}
    </style>
</head>
<body>
<div>
    <div class="wechat"></div>
    <div class="red common"></div>
    <div class="blue common"></div>
    <div class="green common"></div>
</div>
</body>
</html>

    

    

    3.3 backface-visibility
    

    指定元素背面面向用户时，是否可见。
    

      

    • visible：可见，默认，如同玻璃
      • 

    • hidden：不可见，如同木板
      • 

    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
       body{
        -webkit-perspective: 800px;
                perspective: 800px;
        -webkit-perspective-origin:50%;
                perspective-origin: 50%;
       }
       .cube{
        display: inline-block; 100px;height: 100px;margin: 50px;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
       }
       .cube > div{
        position: absolute; 100%;height: 100%;
        box-shadow: inset 0 0 15px rgba(0,0,0,.2);
        background-color:rgba(255,255,255,.1);/*注意透明度。如果透明度大，将展示不可见*/
        color:gray;
        font-size: 20px;line-height: 100px;text-align: center;
       }
       .front{
        -webkit-transform: translateZ(50px) ;
                transform: translateZ(50px) ;
       }
       .back{
        -webkit-transform: rotateY(180deg) translateZ(50px) ;
                transform: rotateY(180deg) translateZ(50px) ;

       }
       .right{
        -webkit-transform: rotateY(90deg) translateZ(50px) ;
                transform: rotateY(90deg) translateZ(50px) ;

       }
       .left{
        -webkit-transform: rotateY(-90deg) translateZ(50px) ;
                transform: rotateY(-90deg) translateZ(50px) ;

       }
       .top{
        -webkit-transform: rotateX(90deg) translateZ(50px) ;
                transform: rotateX(90deg) translateZ(50px) ;

       }
       .bottom{
        -webkit-transform: rotateX(-90deg) translateZ(50px) ;
                transform: rotateX(-90deg) translateZ(50px) ;

       }
       .c1 > div{
        -webkit-backface-visibility: visible;
                backface-visibility: visible;
       }
       .c2 > div{
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
       }
    </style>
</head>
<body>
<div class="cube c1">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
<div class="cube c2">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
</div>
</body>
</html>
  • 相关阅读:
    20165231 2017-2018-2《Java程序设计》课程总结
    2017-2018-2 20165231 实验五 网络编程与安全
    2017-2018-2 20165231 实验四 Android程序设计
    2017-2018-2 20165231 实验三 敏捷开发与XP实践
    20165231 2017-2018-2 《Java程序设计》第9周学习总结
    20165231 结对编程四则运算第二阶段总结
    20165231 2017-2018-2 《Java程序设计》第8周学习总结
    20165115 第二周学习总结
    20165115 第一周学习总结
    20165115 C语言学习心得
  • 原文地址：https://www.cnblogs.com/csj2018/p/13594163.html
Copyright © 2020-2023  润新知