CSS3变形透视动画-3-cyy

2020-11-12
3044

perspective透视规则与函数不同应用体验：

perspective加在父元素和加在子元素的区别：

加在父元素上是整体观察所有子元素，加在子元素上是独立观察子元素；

perspective规则和transform:perspective()函数的区别： perspective加在父元素上，不影响父元素本身； transform:perspective()函数会影响父元素本身

<!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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            /* perspective加在父元素上，就是整体观察所有子元素 */
            /* 只影响整体子元素，不影响父元素本身 */
            perspective:900px;
            border:3px solid red;
            /* 会影响父元素本身 */
            transform:perspective(600px) rotateY(45deg);
        }
        div{
            width:200px;
            height:200px;
            margin-right:100px;
            /* perspective(透视距离)，透视距离越小，透视越明显 */
            /* transform:perspective()，独立观察子元素 */
            transform:perspective(900px) rotateY(45deg);
        }
        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>

preserve-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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            border:3px solid red;
            width:400px;
            height:300px;
            /* 设置3d效果 */
            transform-style:preserve-3d;
            /* 给父元素加上透视和适当旋转，才能看到z轴的变化 */
            transform:perspective(900px) rotateY(45deg);

        }
        div{
            width:200px;
            height:200px;
            margin-right:100px;
            position:absolute;
        }
        div:nth-child(1){
            background:pink;
        }
        div:nth-child(2){
            background:lightblue;

            /* 三维空间需要操作z轴 */
            transform:translateZ(300px);
        }
        main:hover div:nth-child(1){
        }
        main:hover div:nth-child(2){
    长沙网站建设等相关服务请咨询律品科技客服        
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            border:3px solid red;
            width:200px;
            height:200px;

            transform-style:preserve-3d;
            transform:perspective(900px) rotateX(-45deg);
            transition:1s;
            transform-origin:center center -200px;

        }
        article{
            width:400px;
            height:400px;
            border:1px solid red;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        article:hover main{
            transform:perspective(900px) rotateX(-45deg) rotateY(555deg);

        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            overflow:hidden;
            transform-origin:center center -200px;

        }
        div>img{
            height:100%;
        }
        div:nth-child(1){
            
            transform:rotateY(90deg);
        }
        div:nth-child(2){
            transform:rotateY(180deg);
        }
        div:nth-child(3){
            transform:rotateY(270deg);
        }
        div:nth-child(4){
            transform:rotateY(360deg);
        }
    </style>
</head>
<body>
    <article>
        <main>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069498580&di=557f5cf3f788d1761e7b992aefeffc99&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Fthumb150%2F6f807ba3gw1f4v0m2ll0bj20ku0ku77i.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069499855&di=4526f815cf47b8fc29e2120fcd8f2144&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn23%2F400%2Fw600h600%2F20181023%2F2f0e-hmuuiyw6041112.jpg" alt=""></div>
            <div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809686336,965929022&fm=26&gp=0.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069504608&di=e26f4483ed372b10a6e87626616620c1&imgtype=0&src=http%3A%2F%2Fpic.5577.com%2Fup%2F2017-7%2F15010420363446897.jpg%2521360_360" alt=""></div>
        </main>
    </article>
</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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            border:3px solid red;
            width:200px;
            height:200px;

            transform-style:preserve-3d;
            transform:perspective(900px);
            transition:1s;
            transform-origin:center center -200px;

        }
        article{
            width:400px;
            height:400px;
            border:1px solid red;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        article:hover main{
            transform:perspective(900px) rotateY(90deg);

        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            overflow:hidden;
            transform-origin:center center -200px;

        }
        div>img{
            height:100%;
        }
        div:nth-child(1){
            
            transform:rotateY(90deg);
        }
        div:nth-child(2){
            transform:rotateY(180deg);
        }
        div:nth-child(3){
            transform:rotateY(270deg);
        }
        div:nth-child(4){
            transform:rotateY(360deg);
        }
    </style>
</head>
<body>
    <article>
        <main>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069498580&di=557f5cf3f788d1761e7b992aefeffc99&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Fthumb150%2F6f807ba3gw1f4v0m2ll0bj20ku0ku77i.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069499855&di=4526f815cf47b8fc29e2120fcd8f2144&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn23%2F400%2Fw600h600%2F20181023%2F2f0e-hmuuiyw6041112.jpg" alt=""></div>
            <div><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809686336,965929022&fm=26&gp=0.jpg" alt=""></div>
            <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605069504608&di=e26f4483ed372b10a6e87626616620c1&imgtype=0&src=http%3A%2F%2Fpic.5577.com%2Fup%2F2017-7%2F15010420363446897.jpg%2521360_360" alt=""></div>
        </main>
    </article>
</body>
</html>

perspective-origin 调整观看视角实例：

<!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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            border:3px solid red;
            width:400px;
            height:300px;
            transform-style:preserve-3d;
            perspective:900px;
            transition:2s;

        }
        body:hover main{
            /* 物体本身移动 */
            /* transform:rotateY(60deg); */

            /* 视角移动 */
            perspective-origin:center left;
            perspective-origin:2000px -300px;
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
        }
        div:nth-child(1){
            background:pink;
            transform:rotateY(60deg);
        }
        div:nth-child(2){
            background:lightblue;
            transform:rotateY(60deg) translateZ(-300px);
        }
    </style>
</head>
<body>
    <main>
        <div></div>
        <div></div>
    </main>
</body>
</html>

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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            /* border:3px solid #ddd; */
            width:200px;
            height:200px;
            transform-style:preserve-3d;
            transform:perspective(900px);
            transition:2s;
            transform-origin:center center 100px;
        }
        body:hover main{
            transform:perspective(900px) rotateY(150deg);
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            background:#8bc34a;
            font-size:4em;
            display:flex;
            justify-content:center;
            align-items:center;
            transform-origin:center center 100px;
            opacity:.8;
        }
        div:nth-child(1){
            background:#c34a8b;
            transform:rotateY(90deg);
        }
        div:nth-child(2){
            background:#4a8bc3;
            transform:rotateY(180deg);
        }
        div:nth-child(3){
            background:#8bc34a;
            transform:rotateY(270deg);
        }
        div:nth-child(4){
            background:#4ac3bf;
            transform:rotateY(360deg);
        }
        div:nth-child(5){
            background:#c34a4e;
            transform-origin:top;
            transform:rotateX(90deg);
        }
        div:nth-child(6){
            background:#ff893b;
            transform-origin:bottom;
            transform:rotateX(-90deg);
        }
    </style>
</head>
<body>
    <main>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            /* border:3px solid #ddd; */
            width:400px;
            height:200px;
            transform-style:preserve-3d;
            transform:perspective(900px);
            transition:4s;
            /* 左右旋转 */
            transform-origin:200px center -100px;
            /* 上下旋转 */
            transform-origin:200px 100px -100px;
        }
        body:hover main{
            /* 左右旋转 */
            transform:perspective(900px) rotateY(360deg);
            /* 上下旋转 */
            transform:perspective(900px) rotateX(360deg);
        }
        div{
            position:absolute;
            background:#8bc34a;
            font-size:4em;
            display:flex;
            justify-content:center;
            align-items:center;
            transform-origin:center center 100px;
            opacity:.8;
        }
        div:nth-child(1){
            width:400px;
            height:200px;
            background:#c34a8b;
        }
        div:nth-child(2){
            width:400px;
            height:200px;
            background:#4a8bc3;
            transform:translateZ(-200px);
        }
        div:nth-child(3){
            width:200px;
            height:200px;
            background:#8bc34a;
            transform-origin:left;
            transform:rotateY(90deg);
        }
        div:nth-child(4){
            width:200px;
            height:200px;
            background:#4ac3bf;
            transform-origin:right;
            transform:translateX(200px) rotateY(-90deg);
        }
        div:nth-child(5){
            width:400px;
            height:200px;
            background:#c34a4e;
            transform-origin:top;
            transform:rotateX(-90deg);
        }
        div:nth-child(6){
            width:400px;
            height:200px;
            background:#ff893b;
            transform-origin:bottom;
            transform:rotateX(90deg);
        }
    </style>
</head>
<body>
    <main>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </main>
</body>
</html>

backface-visibility 控制元素背面隐藏效果：

<!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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            justify-content:center;
            align-items:center;
            border:3px solid red;
            width:400px;
            height:400px;
            perspective:900px;
        }
        body:hover main div:nth-child(1){
            transform:rotateY(-180deg);
        }
        body:hover main div:nth-child(2){
            transform:rotateY(0deg);
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            display:flex;
            justify-content:center;
            align-items:center;
            transition:2s;
            /* 设置背面不可见 */
            backface-visibility:hidden;
        }
        div:nth-child(1){
            background:pink;
        
        }
        div:nth-child(2){
            background:lightblue;
            transform:rotateY(180deg);
        }
    </style>
</head>
<body>
    <main>
        <div>1</div>
        <div>2</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;
            background:#3848a2;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        main{
            display:flex;
            justify-content:center;
            align-items:center;
            border:3px solid red;
            width:400px;
            height:400px;
            perspective:900px;
            transition:2s;
            /* 如果旋转加在父元素上，需要设置三维效果 */
            transform-style:preserve-3d;
        }
        body:hover main{
            transform:rotateY(-180deg);
        }
        div{
            width:200px;
            height:200px;
            position:absolute;
            display:flex;
            justify-content:center;
            align-items:center;
            
            /* 设置背面不可见 */
            backface-visibility:hidden;
        }
        div:nth-child(1){
            background:pink;
        
        }
        div:nth-child(2){
            background:lightblue;
            transform:rotateY(180deg);
        }
    </style>
</head>
<body>
    <main>
        <div>1</div>
        <div>2</div>
    </main>
</body>
</html>

移动端3D登录注册切换页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        main{
            width:100vw;
            height:100vh;
            transform-style:preserve-3d;
            transform:perspective(900px);
            transition:2s;
        }
        main.login{
            transform:perspective(900px) rotateY(0deg);
        }
        main.register{
            transform:perspective(900px) rotateY(180deg);
        }
        /* body:hover main{
            transform:perspective(900px) rotateY(180deg);
        } */
        div{
            position: absolute;
            width:100%;
            height:100%;
            background:#000;
            display:flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
     佛山网站建设等相关服务请咨询律品科技客服       font-size:4em;
            color:white;
            text-transform:uppercase;
            backface-visibility:hidden;
            transition:1s;

        }
        div:nth-child(1){
            background:#8a4af3;
        }
        div:nth-child(2){
            background:#f34a5e;
            transform:rotateY(180deg);
        }
        div span{
            font-size:.3em;
            color:#ddd;
        }
        div i[class^='fa']{
            font-size:1.5em;
        }
        nav{
            width:100%;
            position:absolute;
            text-align:center;
            bottom:60px;
        }
        nav a{
            padding:10px 20px;
            background:#666666;
            margin-right:10px;
            text-decoration: none;
            color:white;
        }


    </style>
</head>
<body>
    <main>
        <div>
            <i class="fa fa-home" aria-hidden="true"></i>
            login
            <span>cyy login</span>
        </div>
        <div>
            <i class="fa fa-user" aria-hidden="true"></i>
            register
            <span>cyy register</span>
        </div>
    </main>
    <nav>
        <a href="javascript:;" onclick="change('login')">登录</a>
        <a href="javascript:;" onclick="change('register')">注册</a>
    </nav>

    <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
    <script>
        function change(t){
            switch(t){
                case 'login':
                    $('main').removeClass().addClass('login');
                    break;
                case 'register':
                    $('main').removeClass().addClass('register');
                    break;
            }
        }
    </script>
</body>
</html>