首页 > > 网页制作 > css >

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

2020-02-03 16:00:46来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

css3 transform

兼容性：IE10+

transform:rotate(deg)

正数为顺时针，负数为逆时针

<!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)

transform:translateY(y)

transform:translate(x,y)

第二个值可省略，省略时默认第二个参数为0

<!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)

transform:scaleY(y)

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>

 


原文链接:https://www.cnblogs.com/chenyingying0/p/12256381.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：网页的标题栏添加小图标

下一篇：通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签