首页 / 网站技术

CSS3变形透视动画-cyy

  • 2020-11-12
  • 1101

使用translate控制元素二维移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-200px;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
        }
        div:nth-child(1){
            background:pink;
        }
        div:nth-child(2){
            background:lightblue;
            transition:1s;
        }株洲网站建设等相关服务请咨询律品科技客服
        main:hover div:nth-child(2){
            transform:translateX(100px);
            transform:translateX(-200px);
            /* 百分比是参考元素本身宽度 */
            transform:translateX(-200%);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

 

多条规则注意事项与二维移动统一控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-200px;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
        }
        div:nth-child(1){
            background:pink;
        }
        div:nth-child(2){
            background:lightblue;
            transition:1s;
        }
        main:hover div:nth-child(2){
            transform:translateX(200px) translateY(200%);
            /* 简写 */
            transform:translate(100px,100%);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

控制元素居中的多种技巧分析：

【方式1，display:flex】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            /* top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-200px; */
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
        }
        div:nth-child(1){
            background:pink;
        }
        div:nth-child(2){
            background:lightblue;
            transition:1s;
        }
        main:hover div:nth-child(2){
            
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

 

【方式2：绝对定位】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            /* display:flex;
            justify-content:center;
            align-items:center; */
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-200px;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
        }
        div:nth-child(1){
            background:pink;
        }
        div:nth-child(2){
            background:lightblue;
            transition:1s;
        }
        main:hover div:nth-child(2){
            
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

【方式3：绝对定位+translate】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            /* display:flex;
            justify-content:center;
            align-items:center; */
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
        }
        div:nth-child(1){
            background:pink;
        }
        div:nth-child(2){
            background:lightblue;
            transition:1s;
        }
        main:hover div:nth-child(2){
            
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

体验三维Z轴的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
        }
        div:nth-child(1){
            background:pink;
            transform:perspective(900px) rotateY(45deg);
        }
        div:nth-child(2){
            background:lightblue;
            transform:perspective(900px) rotateY(45deg);
        }
        main:hover div:nth-child(1){
            transform:perspective(900px) rotateY(45deg) translateZ(-200px);
        }
        main:hover div:nth-child(2){
            transform:perspective(900px) rotateY(45deg) translateZ(200px);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

 

注意Z轴移动只能是具体的单位，不能是百分比

 

使用translate3d控制3D移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
        }
        div:nth-child(1){
            background:pink;
            transform:perspective(900px) rotateY(45deg) translate3d(0,0,0);
        }
        div:nth-child(2){
            background:lightblue;
            transform:perspective(900px) rotateY(45deg) translate3d(0,0,0);
        }
        main:hover div:nth-child(1){
            transform:perspective(900px) rotateY(45deg) translate3d(0,0,-200px);
        }
        main:hover div:nth-child(2){
            transform:perspective(900px) rotateY(45deg) translate3d(0,0,200px);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

 

漂亮的动感表单效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            
        }
        .field{
            position:relative;
            overflow:hidden;
            margin-bottom:20px;
        }
        .field::before{
            content:'';
            position:absolute;
            left:0;
            bottom:0;
            height:2px;
            right:0;
            background-image:linear-gradient(to right,white,lightblue,pink, lightgreen,white);
            transform:translateX(-100%);
            transition:2s;
        }
        .field:hover::before{
            transform:translateX(100%);
        }
        .field input{
            border:none;
            outline:none;
            padding:10px;
            background:#f3f3f3;
        }
    </style>
</head>
<body>
    <main>
        <div class="field"><input type="text" placeholder="请输入账号"></div>
        <div class="field"><input type="text" placeholder="请输入密码"></div>
    </main>
</body>
</html>

 

 

超酷的移动端视图切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            flex-direction:column;
        }
        main{
            flex:1;
        }
        nav{
            height:8vh;
            background:lightblue;
            display:flex;
            justify-content:space-evenly;
            align-items:center;
        }
        nav a{
            text-decoration: none;
            color:white;
            text-transform:uppercase;
            flex:1;
            text-align:center;
        }
        nav a:nth-child(2){
            border-left:1px solid white;
            border-right:1px solid white;
        }

    </style>
</head>
<body>
    <main></main>
    <nav>
        <a href="">home</a>
        <a href="">video</a>
        <a href="">live</a>
    </nav>
</body>
</html>

 

 

移动端多视图切换呈现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="fa/css/font-awesome.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            flex-direction:column;
            background:red;
        }
        body::after{
            content:'cyy';
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            font-size:2em;
            opacity:.3;
        }
        main{
            flex:1;
            position:relative;
        }
        nav{
            height:8vh;
            background:lightblue;
            display:flex;
            justify-content:space-evenly;
            align-items:center;
        }
        nav a{
            text-decoration: none;
            color:white;
            text-transform:uppercase;
            flex:1;
            text-align:center;
        }
        nav a:nth-child(2){
            border-left:1px solid white;
            border-right:1px solid white;
        }
        main>div{
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;

            display:flex;
            flex-direction:column;
            justify-content:space-evenly;
            align-items:center;

            transform:translateY(-100%);
            transition:1s;

            z-index:1;
        }
        main>div:target{
            transform:translateY(0);
        }
        /* :target被点击触发时 */
        main>div:nth-child(1):target{
            background:#ddd;
        }
        main>div:nth-child(2):target{
            background:orange;
        }
        main>div:nth-child(3):target{
            background:lightgreen;
        }
        i[class^='fa']{
            font-size:6em;
            color:white;
        }
    </style>
</head>
<body>
    <main>
        <div id="home"><i class="fa fa-home"></i></div>
        <div id="video"><i class="fa fa-ban"></i></div>
        <div id="live"><i class="fa fa-camera"></i></div>
    </main>
    <nav>
        <a href="#home">home</a>
        <a href="#video">video</a>
        <a href="#live">live</a>
    </nav>
</body>
</html>

 

2D缩放使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
       中山网站建设等相关服务请咨询律品科技客服 body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
        }
        div:nth-child(1){
            background:pink;
        }
        div:nth-child(2){
            background:lightblue;
        }
        main:hover div:nth-child(1){
        }
        main:hover div:nth-child(2){
                    transform:scaleX(2);
                    transform:scaleY(.5);
                    transform:scale(2,.5);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

 

3D视图中Z轴缩放使用：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width:100vw;
            height:100vh;
        }
        main{
            position:absolute;
            width:400px;
            height:400px;
            border:1px solid pink;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%) perspective(900px) rotateY(45deg);
            transform-style:preserve-3d;
            transition:1s;
        }
        body:hover main{
            /* 把Z轴变长 */
            transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scaleZ(3);
             /* 把Z轴变短 */
            transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scaleZ(.5);
        }
        div{
            width:200px;
            height:200px;

            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            transition:1s;

        }
        div:nth-child(1){
            background:lightblue;

        }
        div:nth-child(2){
            background:#ddd;

        }
        main:hover div:nth-child(2){
            transform:translateZ(-400px);

        }
        
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

使用slace3d同时改变三轴缩放：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            width:100vw;
            height:100vh;
        }
        main{
            position:absolute;
            width:400px;
            height:400px;
            border:1px solid pink;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%) perspective(900px) rotateY(45deg);
            transform-style:preserve-3d;
            transition:1s;
        }
        body:hover main{
            transform:translate(-50%,-50%) perspective(900px) rotateY(45deg) scale3d(2,2,2);
        }
        div{
            width:200px;
            height:200px;

            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            transition:1s;

        }
        div:nth-child(1){
            background:lightblue;

        }
        div:nth-child(2){
            background:#ddd;

        }
        main:hover div:nth-child(2){
            transform:translateZ(-400px);

        }
        
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

 

 

开发缩放菜单案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
        main{
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
        }
        ul{
            display:flex;
            list-style:none;
        }
        ul li{
            margin-right:10px;

        }
        ul li strong{
            padding:5px 30px;
            text-transform:uppercase;
            background:lightgreen;
            color:white;
            cursor:pointer;
        }
        strong+div{
            background:#ddd;
            padding:10px;
            display:flex;
            flex-direction:column;
            transform:scale(0);
            transition:.5s;
            position:relative;
            z-index:-1;
            transform-origin:center top;
        }
        strong+div>a{
            color:#333;
            padding:5px 0;
            text-decoration:none;
        }
        ul li:hover strong+div{
            transform:scale(1);
        }
        
    </style>
</head>
<body>
    <main>
        <ul>
            <li>
                <strong>video</strong>
                <div>
                    <a href="">html</a>
                    <a href="">css</a>
                </div>
                
            </li>
            <li>
                <strong>live</strong>
                <div>
                    <a href="">js</a>
                    <a href="">jq</a>
                </div>
                
            </li>
        </ul>
    </main>
</body>
</html>

 

 

图集效果案例：

【鼠标移入，放大元素】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            background:#ddd;
        }
        main{
            display:flex;
            justify-content:center;
            align-items:center;
        }
        div{
            width:200px;
            height:200px;
            margin-right:20px;
            overflow:hidden;
            border:1px solid #eee;
            transition:1s;
        }
        div>img{
            height:100%;
            cursor:pointer;
        }
        main:hover div{
            /* 滤镜：高斯模糊 */
            filter:blur(5px);
            transform:scale(.6);
        }
        main:hover div:hover{
            filter:none;
            transform:scale(1.6);
        }
    </style>
</head>
<body>
    <main>
        <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020760089&di=7dea6c630e281d32d2e9d43ec9447024&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615144625_tyEUV.thumb.400_0.jpeg" alt=""></div>
        <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020764640&di=da5cbad756be09978194787be4c88324&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F05%2F20200305152336_HzjWi.thumb.400_0.jpeg" alt=""></div>
        <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020833326&di=d4c101472a43d47d574fab6a3327d98e&imgtype=0&src=http%3A%2F%2Fm.imeitou.com%2Fuploads%2Fallimg%2F2020100608%2Fh2ohk0shtuw.jpg" alt=""></div>
    </main>
</body>
</html>

 

 

【鼠标移入，放大图片】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="关键词1，关键词2，关键词3">
    <meta name="description" content="网站描述bla bla">
    <title>网站标题</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            background:#ddd;
        }
        main{
            display:flex;
            justify-content:center;
            align-items:center;
        }
        div{
            width:200px;
            height:200px;
            margin-right:20px;
            overflow:hidden;
            border:1px solid #eee;
            
        }
        div>img{
            height:100%;
            cursor:pointer;
            transition:1s;
            filter:blur(2px);
        }
        img:hover{
            transform:scale(1.6);
            filter:none;
        }
    </style>
</head>
<body>
    <main>
        <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020760089&di=7dea6c630e281d32d2e9d43ec9447024&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615144625_tyEUV.thumb.400_0.jpeg" alt=""></div>
        <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020764640&di=da5cbad756be09978194787be4c88324&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F05%2F20200305152336_HzjWi.thumb.400_0.jpeg" alt=""></div>
        <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605020833326&di=d4c101472a43d47d574fab6a3327d98e&imgtype=0&src=http%3A%2F%2Fm.imeitou.com%2Fuploads%2Fallimg%2F2020100608%2Fh2ohk0shtuw.jpg" alt=""></div>
    </main>
</body>
</html>

 

 

按X轴旋转物体与透视查看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-200px;
            margin-top:-200px;
            transform:perspective(900px) rotateX(-45deg);
            /* 3d透视，能看到z轴的内容 */
            transform-style:preserve-3d;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
            
        }
        div:nth-child(1){
            background:pink;
        }
        main:hover div:nth-child(1){
            transform:perspective(900px) rotateX(90deg);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

 

 

YZ轴旋转操作体验：

【y轴】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-200px;
            margin-top:-200px;
            transform:perspective(900px) rotateY(-45deg);
            /* 3d透视，能看到z轴的内容 */
            transform-style:preserve-3d;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
            
        }
        div:nth-child(1){
            background:pink;
        }
        main:hover div:nth-child(1){
            transform:perspective(900px) rotateY(90deg);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

 

 

【z轴】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-200px;
            margin-top:-200px;
            transform:perspective(900px) rotateY(-45deg);
            /* 3d透视，能看到z轴的内容 */
            transform-style:preserve-3d;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
            
        }
        div:nth-child(1){
            background:pink;
        }
        main:hover div:nth-child(1){
            transform:perspective(900px) rotateZ(90deg);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

 

 

平面2d旋转：rotate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-200px;
            margin-top:-200px;
            transform:perspective(900px) rotateY(-45deg);
            /* 3d透视，能看到z轴的内容 */
            transform-style:preserve-3d;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
            
        }
        div:nth-child(1){
            background:pink;
        }
        main:hover div:nth-child(1){
            transform:perspective(900px) rotate(390deg);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

 

rotate3d控制3d向量旋转：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            width:100vw;
            height:100vh;
        }
      main{
            width:400px;
            height:400px;
            border:1px solid silver;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-200px;
            margin-top:-200px;
            transform:perspective(900px) rotateY(-45deg);
            /* 3d透视，能看到z轴的内容 */
            transform-style:preserve-3d;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-100px;
            margin-left:-100px;
            transition:1s;
            
        }
        div:nth-child(1){
            background:pink;
        }
        main:hover div:nth-child(1){
            /* x轴旋转 */
            transform:perspective(900px) rotate3d(1,0,0,90deg);
            /* y轴旋转 */
            transform:perspective(900px) rotate3d(0,1,0,90deg);
            /* z轴旋转 */
            transform:perspective(900px) rotate3d(0,0,1,90deg);
            /* 对角线旋转 */
            transform:perspective(900px) rotate3d(1,1,0,90deg);
            transform:perspective(900px) rotate3d(1,0,1,90deg);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>

 

参数叠加与顺序对变形结果的影响：

参数不会叠加，后面的会覆盖掉前面的 ；

顺序不同，变形结果也不同；

 

相关阅读

CSS3背景与渐变应用技巧-cyy

使用CSS3操作数据内容样式-cyy

未来的CSS3布局方式，GRID栅格系统-2-cyy

CSS3浮动布局，深度挖掘-2-cyy

未来的CSS3布局方式，GRID栅格系统-cyy

律师网站模板推荐

刑事律师网站模板、响应式深灰色大气律师网站模板

￥1000.00

律师网站模板、律师事务所网站模板【响应式，蓝色简洁大气风格】

￥1000.00

简洁大气的响应式律师事务所网站设计模板，兼容移动端

￥50.00

网站技术推荐

CSS3背景与渐变应用技巧-cyy 使用CSS3操作数据内容样式-cyy 未来的CSS3布局方式，GRID栅格系统-2-cyy pc端兼容IE9及以上版本IE浏览器兼容 律师网站设计：CSS文字垂直展示的方法 律师网站设计：纯CSS实现鼠标悬停弹出微信二维码 律师网站设计：纯CSS实现鼠标经过弹出微信二维码 浏览器显示网站不安全？说说HTTP与HTTPS的区别

成都律品科技有限公司专注律师互联网营销技术服务，创始人员2009年开始从事律师行业互联网技术开发、营销运营工作已十年，2018年公司正式成立，不断探索律师行业服务需求，致力于为律师行业提供透明、优质的服务,现已为全国多家律师事务所、律师团队提供互联网技术及营销支持。

2020 成都律品科技 川公网安备 51010702002621号 蜀ICP备18025242号-1 RSS
在线咨询

  • 152-0832-9147

  • 105991110

全时在线，如未回复请留下联系方式

微信咨询

上海律师网站建设 北京律师网站建设 深圳律师网站建设 广州律师网站建设 天津律师网站建设 重庆律师网站建设 苏州律师网站建设 成都律师网站建设 武汉律师网站建设 杭州律师网站建设 南京律师网站建设 青岛律师网站建设 无锡律师网站建设 长沙律师网站建设 宁波律师网站建设 郑州律师网站建设 佛山律师网站建设 济南律师网站建设 南通律师网站建设 东莞律师网站建设 烟台律师网站建设 西安律师网站建设 泉州律师网站建设 常州律师网站建设 合肥律师网站建设 大连律师网站建设 徐州律师网站建设 福州律师网站建设 唐山律师网站建设 潍坊律师网站建设 石家庄律师网站建设 长春律师网站建设 温州律师网站建设 盐城律师网站建设 扬州律师网站建设 绍兴律师网站建设 泰州律师网站建设 哈尔滨律师网站建设 沈阳律师网站建设 淄博律师网站建设 南昌律师网站建设 济宁律师网站建设 临沂律师网站建设 昆明律师网站建设 嘉兴律师网站建设 洛阳律师网站建设 厦门律师网站建设 台州律师网站建设 镇江律师网站建设 金华律师网站建设 惠州律师网站建设 宜昌律师网站建设 襄阳律师网站建设 泰安律师网站建设 鄂尔多斯律师网站建设 淮安律师网站建设 东营律师网站建设 太原律师网站建设 中山律师网站建设 榆林律师网站建设 威海律师网站建设 德州律师网站建设 南宁律师网站建设 沧州律师网站建设 贵阳律师网站建设 漳州律师网站建设 南阳律师网站建设 聊城律师网站建设 菏泽律师网站建设 芜湖律师网站建设 邯郸律师网站建设 岳阳律师网站建设 常德律师网站建设 茂名律师网站建设 保定律师网站建设 呼和浩特律师网站建设 珠海律师网站建设 遵义律师网站建设 湖州律师网站建设 连云港律师网站建设 湛江律师网站建设 江门律师网站建设 宿迁律师网站建设 许昌律师网站建设 滨州律师网站建设 乌鲁木齐律师网站建设 兰州律师网站建设 包头律师网站建设 赣州律师网站建设 周口律师网站建设 枣庄律师网站建设 衡阳律师网站建设 大庆律师网站建设 九江律师网站建设 株洲律师网站建设 柳州律师网站建设 新乡律师网站建设 汕头律师网站建设 廊坊律师网站建设 信阳律师网站建设
展开