css3元素如何扭曲、移位或旋轉

時間 2020-02-04

標籤 css3 css 元素如何扭曲移位旋轉欄目 CSS 简体版

原文原文鏈接

css3 transformcss

兼容性：IE10+html

transform:rotate(deg)css3

正數爲順時針，負數爲逆時針web

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p{
        text-align: center;
        border:1px solid;
        -webkit-transform:rotate(45deg);
           -moz-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
             -o-transform:rotate(45deg);
                transform:rotate(45deg);
    }
</style>
</head>
<body>

    <p>transform:rotate</p>

</body>
</html>

transform:translateX(x)url

transform:translateY(y)spa

transform:translate(x,y)3d

第二個值可省略，省略時默認第二個參數爲0code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background:#abcdef;
        margin-bottom:50px;
    }
    p{
        text-align: center;
        border:1px solid;

    }
    div:nth-child(1) p{
        -webkit-transform:translateX(10px);
           -moz-transform:translateX(10px);
            -ms-transform:translateX(10px);
             -o-transform:translateX(10px);
                transform:translateX(10px);        
    }
    div:nth-child(2) p{
        -webkit-transform:translateY(10px);
           -moz-transform:translateY(10px);
            -ms-transform:translateY(10px);
             -o-transform:translateY(10px);
                transform:translateY(10px);        
    }
    div:nth-child(3) p{
        -webkit-transform:translate(10px, 10px);
           -moz-transform:translate(10px, 10px);
            -ms-transform:translate(10px, 10px);
             -o-transform:translate(10px, 10px);
                transform:translate(10px, 10px);        
    }
    div:nth-child(4) p{
        -webkit-transform:translate(10px);
           -moz-transform:translate(10px);
            -ms-transform:translate(10px);
             -o-transform:translate(10px);
                transform:translate(10px);        
    }
</style>
</head>
<body>
    <div><p>transform:translateX</p></div>
    <div><p>transform:translateY</p></div>
    <div><p>transform:translate</p></div>
    <div><p>transform:translate</p></div>
</body>
</html>

transform:scaleX(x)orm

transform:scaleY(y)htm

transform:scale(x,y)

若是隻有一個參數，則默認爲等比例縮放

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background:#abcdef;
        margin-bottom:50px;
    }
    p{
        text-align: center;
        border:1px solid;

    }
    div:nth-child(1) p{
        -webkit-transform:scaleX(.5);
           -moz-transform:scaleX(.5);
            -ms-transform:scaleX(.5);
             -o-transform:scaleX(.5);
                transform:scaleX(.5);        
    }
    div:nth-child(2) p{
        -webkit-transform:scaleY(.5);
           -moz-transform:scaleY(.5);
            -ms-transform:scaleY(.5);
             -o-transform:scaleY(.5);
                transform:scaleY(.5);    
    }
    div:nth-child(3) p{
        -webkit-transform:scale(.5, .3);
           -moz-transform:scale(.5, .3);
            -ms-transform:scale(.5, .3);
             -o-transform:scale(.5, .3);
                transform:scale(.5, .3);        
    }
    div:nth-child(4) p{
        -webkit-transform:scale(.5);
           -moz-transform:scale(.5);
            -ms-transform:scale(.5);
             -o-transform:scale(.5);
                transform:scale(.5);        
    }
</style>
</head>
<body>
    <div><p>transform:scaleX</p></div>
    <div><p>transform:scaleY</p></div>
    <div><p>transform:scale</p></div>
    <div><p>transform:scale</p></div>
</body>
</html>

transform:skewX(xdeg) 正數逆時針，負數順時針

transform:skewY(ydeg) 正數順時針，負數逆時針

transform:skew(xdeg, ydeg) 第二個參數能夠不填寫，默認爲0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background:#abcdef;
        margin-bottom:50px;
        text-align: center;
        border:1px solid;
        width:200px;
    }
    div:nth-child(1){
        -webkit-transform:skewX(10deg);
           -moz-transform:skewX(10deg);
            -ms-transform:skewX(10deg);
             -o-transform:skewX(10deg);
                transform:skewX(10deg);        
    }
    div:nth-child(2){
        -webkit-transform:skewY(10deg);
           -moz-transform:skewY(10deg);
            -ms-transform:skewY(10deg);
             -o-transform:skewY(10deg);
                transform:skewY(10deg);    
    }
    div:nth-child(3){
        -webkit-transform:skew(10deg, 20deg);
           -moz-transform:skew(10deg, 20deg);
            -ms-transform:skew(10deg, 20deg);
             -o-transform:skew(10deg, 20deg);
                transform:skew(10deg, 20deg);        
    }
    div:nth-child(4){
        -webkit-transform:skew(10deg);
           -moz-transform:skew(10deg);
            -ms-transform:skew(10deg);
             -o-transform:skew(10deg);
                transform:skew(10deg);        
    }
</style>
</head>
<body>
    <div>transform:skewX</div>
    <div>transform:skewY</div>
    <div>transform:skew></div>
    <div>transform:skew</div>
</body>
</html>

3d 轉換

tranform:rotateX(x) 沿X軸旋轉

transform:rotateY(y) 沿y軸旋轉

transform:rotateZ(z) 沿z軸旋轉

transform:rotate3d(x,y,z,deg)

rotate3d 旋轉角度根據比例計算：

x²+y²+z²=1

計算每一個軸所佔的比例*deg

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background:#abcdef;
        margin-bottom:50px;
        text-align: center;
        border:1px solid;
        width:200px;
    }
    div:nth-child(1){
        -webkit-transform:rotateX(45deg);
           -moz-transform:rotateX(45deg);
            -ms-transform:rotateX(45deg);
             -o-transform:rotateX(45deg);
                transform:rotateX(45deg);        
    }
    div:nth-child(2){
        -webkit-transform:rotateY(45deg);
           -moz-transform:rotateY(45deg);
            -ms-transform:rotateY(45deg);
             -o-transform:rotateY(45deg);
                transform:rotateY(45deg);    
    }
    div:nth-child(3){
        -webkit-transform:rotateZ(45deg);
           -moz-transform:rotateZ(45deg);
            -ms-transform:rotateZ(45deg);
             -o-transform:rotateZ(45deg);
                transform:rotateZ(45deg);        
    }
    div:nth-child(4){
        -webkit-transform:rotate3d(1, 1, 1, 45deg);
           -moz-transform:rotate3d(1, 1, 1, 45deg);
            -ms-transform:rotate3d(1, 1, 1, 45deg);
             -o-transform:rotate3d(1, 1, 1, 45deg);
                transform:rotate3d(1, 1, 1, 45deg);        
    }
</style>
</head>
<body>
    <div>transform:rotateX</div>
    <div>transform:rotateY</div>
    <div>transform:rotateZ</div>
    <div>transform:rotate3d</div>
</body>
</html>

計算：如rotate3d(1,2,1,90deg)
則 x²+(2x)²+x²=1
得 x=根號6/6
則三個軸旋轉的角度分別爲根號6/6*1 根號6/6*2 根號6/6*1

transform:translateX 水平，與2d同樣

transform:translateY 豎直，與2d同樣

transform:translateZ z軸方向，視覺上沒有區別，經常使用於遮罩

transform:translate3d(x,y,z)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background:#abcdef;
        margin-bottom:50px;
    }
    p{

        text-align: center;
        border:1px solid;
        width:200px;
    }
    div:nth-child(1) p{
        -webkit-transform:translateX(45px);
           -moz-transform:translateX(45px);
            -ms-transform:translateX(45px);
             -o-transform:translateX(45px);
                transform:translateX(45px);        
    }
    div:nth-child(2) p{
        -webkit-transform:translateY(45px);
           -moz-transform:translateY(45px);
            -ms-transform:translateY(45px);
             -o-transform:translateY(45px);
                transform:translateY(45px);    
    }
    div:nth-child(3) p{
        -webkit-transform:translateZ(45px);
           -moz-transform:translateZ(45px);
            -ms-transform:translateZ(45px);
             -o-transform:translateZ(45px);
                transform:translateZ(45px);        
    }
    div:nth-child(4) p{
        -webkit-transform:translate3d(45px, 45px, 45px);
           -moz-transform:translate3d(45px, 45px, 45px);
            -ms-transform:translate3d(45px, 45px, 45px);
             -o-transform:translate3d(45px, 45px, 45px);
                transform:translate3d(45px, 45px, 45px);        
    }
</style>
</head>
<body>
    <div><p>transform:translateX</p></div>
    <div><p>transform:translateY</p></div>
    <div><p>transform:translateZ</p></div>
    <div><p>transform:translate3d</p></div>
</body>
</html>

transform:scaleX 與2d同樣

transform:scaleY 與2d同樣

transform:scaleZ 視覺上看沒有區別

transform:scale3d(x,y,z) 參數不可省略

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background:#abcdef;
        margin-bottom:50px;
    }
    p{

        text-align: center;
        border:1px solid;
        width:200px;
    }
    div:nth-child(1) p{
        -webkit-transform:scaleX(.5);
           -moz-transform:scaleX(.5);
            -ms-transform:scaleX(.5);
             -o-transform:scaleX(.5);
                transform:scaleX(.5);        
    }
    div:nth-child(2) p{
        -webkit-transform:scaleY(.5);
           -moz-transform:scaleY(.5);
            -ms-transform:scaleY(.5);
             -o-transform:scaleY(.5);
                transform:scaleY(.5);    
    }
    div:nth-child(3) p{
        -webkit-transform:scaleZ(.5);
           -moz-transform:scaleZ(.5);
            -ms-transform:scaleZ(.5);
             -o-transform:scaleZ(.5);
                transform:scaleZ(.5);        
    }
    div:nth-child(4) p{
        -webkit-transform:scale3d(.5, .5, .5);
           -moz-transform:scale3d(.5, .5, .5);
            -ms-transform:scale3d(.5, .5, .5);
             -o-transform:scale3d(.5, .5, .5);
                transform:scale3d(.5, .5, .5);        
    }
</style>
</head>
<body>
    <div><p>transform:scaleX</p></div>
    <div><p>transform:scaleY</p></div>
    <div><p>transform:scaleZ</p></div>
    <div><p>transform:scale3d</p></div>
</body>
</html>

transform座標系統

默認中心爲元素的幾何中心

更改原點: transform-origin

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div{
        background:#abcdef;
        margin:50px auto;
    }
    p{

        text-align: center;
        border:1px solid;
        width:200px;
        -webkit-transform:rotate(45deg);
           -moz-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
             -o-transform:rotate(45deg);
                transform:rotate(45deg);
    }
    div:nth-child(1) p{
        
    }
    div:nth-child(2) p{
        transform-origin:left top;    
    }
</style>
</head>
<body>
    <div><p>默認</p></div>
    <div><p>transform-origin:left top;</p></div>
</body>
</html>

transform-style: flat | preserve-3d

嵌套元素是否顯示3d效果

默認爲flat，按照正常順序排列，無3d效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{
        width:760px;
        height:760px;
    }
    .container{        
        position: relative;
        /*-webkit-transform-style:flat;
           -moz-transform-style:flat;
            -ms-transform-style:flat;
             -o-transform-style:flat;
                transform-style:flat;*/
        -webkit-transform-style:preserve-3d;
           -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
             -o-transform-style:preserve-3d;
                transform-style:preserve-3d;
    }
    .pic, .inner, .middle, .outer{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
    .inner{
        background:url(source/circle_inner.png) center no-repeat;
        transform:rotateX(108deg);
    }
    .middle{
        background:url(source/circle_middle.png) center no-repeat;
        transform:rotateY(80deg);
    }
    .outer{
        background:url(source/circle_outer.png) center no-repeat;
        transform:rotateZ(70deg);
    }
    .pic{
        background:url(source/pic.png) center no-repeat;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</body>
</html>

perspective:none | 數值

perspective屬性指定了觀察者與z=0平面的距離，使具備三維位置變換的元素產生透視效果。z>0的三維元素比正常大，而z<0時則比正常小，大小程度由該屬性的值決定

三維元素在觀察者後面的部分不會繪製出來，即z軸座標值大於perspective屬性值的部分

屬性值爲0或負值或none（none是默認值）時，沒有透視效果

perspective-origin 透視中心點

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{
        width:760px;
        height:760px;
    }
    .container{        
        position: relative;
        /*-webkit-transform-style:flat;
           -moz-transform-style:flat;
            -ms-transform-style:flat;
             -o-transform-style:flat;
                transform-style:flat;*/
        -webkit-transform-style:preserve-3d;
           -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
             -o-transform-style:preserve-3d;
                transform-style:preserve-3d;
        -webkit-perspective:500px;
           -moz-perspective:500px;
            -ms-perspective:500px;
             -o-perspective:500px;
                perspective:500px;
        -webkit-perspective-origin:bottom;
           -moz-perspective-origin:bottom;
            -ms-perspective-origin:bottom;
             -o-perspective-origin:bottom;
                perspective-origin:bottom;
    }
    .pic, .inner, .middle, .outer{
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
    .inner{
        background:url(source/circle_inner.png) center no-repeat;
        transform:rotateX(108deg);
    }
    .middle{
        background:url(source/circle_middle.png) center no-repeat;
        transform:rotateY(80deg);
    }
    .outer{
        background:url(source/circle_outer.png) center no-repeat;
        transform:rotateZ(70deg);
    }
    .pic{
        background:url(source/pic.png) center no-repeat;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</body>
</html>

backface-visibility: visible | hidden;

背面是否可見

默認爲可見

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .container{    
        width:500px;
        height:500px;    
        position: relative;
        -webkit-transform-style:preserve-3d;
           -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
             -o-transform-style:preserve-3d;
                transform-style:preserve-3d;
    }
    .box1, .box2{
        width:100px;
        height:100px;
        border:1px solid;
        margin:200px auto;
        line-height: 100px;
        text-align: center;
        -webkit-transform:rotateX(137deg);
           -moz-transform:rotateX(137deg);
            -ms-transform:rotateX(137deg);
             -o-transform:rotateX(137deg);
                transform:rotateX(137deg);
    }
    .box1{
        -webkit-backface-visibility: visible;
           -moz-backface-visibility: visible;
            -ms-backface-visibility: visible;
             -o-backface-visibility: visible;
                backface-visibility: visible;
    }
    .box2{
        -webkit-backface-visibility: hidden;
           -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
             -o-backface-visibility: hidden;
                backface-visibility: hidden;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。