AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

深入理解transform属性之翻转效果

2016-03-12 2040
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

DEMO下载：http://download.csdn.net/detail/cometwo/9459617

纯CSS3实现

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />

        <title></title>
        <style>
            a {
                display: block;
                float: left;
                margin: 10px 50px 10px 50px;
                color: red;
                border: 1px solid blue;
            }

            .a {
                transition: All 1s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .a:hover {
                transform: rotate(360deg);
            }

            .b {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .b:hover {
                transform: scale(1.2);
            }

            .c {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .c:hover {
                transform: rotate(360deg) scale(1.2);
            }

            .d {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .d:hover {
                transform: translate(0, -10px);
            }
            /*****************************************/

            .flip-container {
                perspective: 1000;
                clear: both;
                border: 1px solid red;
                margin-top: 50px;
                margin-left: 50px;
            }

            .flip-container:hover .flipper {
                transform: rotateY(-180deg);
            }

            .flip-container,
            .front,
            .back {
                width: 200px;
                height: 200px;
            }

            .flipper {
                transition: 2s;
                transform-style: preserve-3d;
                position: relative;
            }

            .front,
            .back {
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }

            img {
                width: 200px;
                height: 200px;
                overflow: hidden;
            }

            .front {
                background: red;
                z-index: 2;
            }

            .back {
                background: blue;
                transform: rotateY(-180deg);
            }
            /***********************************/

            .flip-container1 {
                perspective: 1000;
                border: 1px solid red;
                margin-top: 50px;
                margin-left: 50px;
            }

            .flip-container1:hover .flipper1 {
                transform: rotateX(-180deg);
            }

            .flip-container1,
            .front1,
            .back1 {
                width: 200px;
                height: 200px;
            }

            .flipper1 {
                transition: 2s;
                transform-style: preserve-3d;
                position: relative;
                transform-origin: 100% 100px;
                /* 高的一半 */
            }

            .front1,
            .back1 {
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }

            img {
                width: 200px;
                height: 200px;
                overflow: hidden;
            }

            .front1 {
                background: red;
                z-index: 2;
            }

            .back1 {
                background: blue;
                transform: rotateX(-180deg);
            }
        </style>

    </head>

    <body>

        <a class="a">360度旋转</a>
        <a class="b">悬浮放大效果</a>
        <a class="c">旋转放大</a>
        <a class="d">上下移动</a>
        <h1 style="clear: both;">垂直翻转</h1>
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <img src="img/1.jpg" />
                </div>
                <div class="back">
                    <img src="img/2.jpg" />
                </div>
            </div>
        </div>

        <h1>水平翻转</h1>
        <div class="flip-container1">
            <div class="flipper1">
                <div class="front1">
                    <img src="img/1.jpg" />
                </div>
                <div class="back1">
                    <img src="img/2.jpg" />
                </div>
            </div>
        </div>
    </body>

</html>

JS实现

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-2.1.0.min.js"></script>
        <title>CSS3 翻转效果 </title>
        <link rel="stylesheet" href="css/fanzhuan.css" type="text/css" />
        <style>
            #box {
                width: 355px;
                height: 500px;
                margin: 30px auto;
                position: relative;
                border: 1px solid red;
            }

            .list {
                position: absolute;
            }

            .list img {
                border-radius: 2px;
            }
        </style>
        <script>
            $(function() {
                // 在前面显示的元素，隐藏在后面的元素
                var eleBack = null,
                    eleFront = null,
                    // 纸牌元素们 
                    eleList = $(".list");
                // 确定前面与后面元素
                var funBackOrFront = function() {
                    eleList.each(function() {
                        if ($(this).hasClass("out")) {
                            eleBack = $(this);
                        } else {
                            eleFront = $(this);
                        }
                    });
                };
                funBackOrFront();
                $("#box").hover(function() {
                    // 切换的顺序如下
                    // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
                    // 2. 结束后，之前显示在后面的元素逆向90度翻转显示在前
                    // 3. 完成翻面效果
                    eleFront.addClass("out").removeClass("in");
                    setTimeout(function() {
                        eleBack.addClass("in").removeClass("out");
                        // 重新确定正反元素
                        funBackOrFront();
                    }, 225);
                    return false;
                });
            })
        </script>
    </head>

    <body>
<h1>必须给要翻转的添加flip类</h1>
        <div id="box">
            <span class="list flip out"><img src="img/puke-back.png" alt="纸牌正面" /></span>
            <span class="list flip"><img src="img/puke-k.png" alt="纸牌背面" /> </span>
        </div>

    </body>

</html>

需要fanzhuan.css支持

/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.out {
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 225ms;
    animation-timing-function: ease-in;
    animation-duration: 225ms;
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fade.out {
    opacity: 0;
    -webkit-animation-duration: 125ms;
    -webkit-animation-name: fadeout;
    animation-duration: 125ms;
    animation-name: fadeout;
}
.fade.in {
    opacity: 1;
    -webkit-animation-duration: 225ms;
    -webkit-animation-name: fadein;
    animation-duration: 225ms;
    animation-name: fadein;
}
.pop {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.pop.in {
    -webkit-transform: scale(1);
    -webkit-animation-name: popin;
    -webkit-animation-duration: 350ms;
    transform: scale(1);
    animation-name: popin;
    animation-duration: 350ms;
    opacity: 1;
}
.pop.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
    opacity: 0;
}
.pop.in.reverse {
    -webkit-animation-name: fadein;
    animation-name: fadein;
}
.pop.out.reverse {
    -webkit-transform: scale(.8);
    -webkit-animation-name: popout;
    transform: scale(.8);
    animation-name: popout;
}
@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@keyframes popin {
    from {
        transform: scale(.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
}
@keyframes popout {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(.8);
        opacity: 0;
    }
}
/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translate3d(100%,0,0); }
    to { -webkit-transform: translate3d(0,0,0); }
}
@keyframes slideinfromright {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translate3d(-100%,0,0); }
    to { -webkit-transform: translate3d(0,0,0); }
}
@keyframes slideinfromleft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translate3d(0,0,0); }
    to { -webkit-transform: translate3d(-100%,0,0); }
}
@keyframes slideouttoleft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translate3d(0,0,0); }
    to { -webkit-transform: translate3d(100%,0,0); }
}
@keyframes slideouttoright {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}
.slide.out, .slide.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.slide.out {
    -webkit-transform: translate3d(-100%,0,0);
    -webkit-animation-name: slideouttoleft;
    transform: translateX(-100%);
    animation-name: slideouttoleft;
}
.slide.in {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-name: slideinfromright;
    transform: translateX(0);
    animation-name: slideinfromright;
}
.slide.out.reverse {
    -webkit-transform: translate3d(100%,0,0);
    -webkit-animation-name: slideouttoright;
    transform: translateX(100%);
    animation-name: slideouttoright;
}
.slide.in.reverse {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-name: slideinfromleft;
    transform: translateX(0);
    animation-name: slideinfromleft;
}
.slidefade.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -webkit-animation-duration: 225ms;
    transform: translateX(-100%);
    animation-name: slideouttoleft;
    animation-duration: 225ms;
}
.slidefade.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 200ms;
    transform: translateX(0);
    animation-name: fadein;
    animation-duration: 200ms;
}
.slidefade.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
    -webkit-animation-duration: 200ms;
    transform: translateX(100%);
    animation-name: slideouttoright;
    animation-duration: 200ms;
}
.slidefade.in.reverse {
    -webkit-transform: translateX(0);
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 200ms;
    transform: translateX(0);
    animation-name: fadein;
    animation-duration: 200ms;
}
/* slide down */
.slidedown.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
}
.slidedown.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfromtop;
    -webkit-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfromtop;
    animation-duration: 250ms;
}
.slidedown.in.reverse {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 150ms;
    animation-name: fadein;
    animation-duration: 150ms;
}
.slidedown.out.reverse {
    -webkit-transform: translateY(-100%);
    -webkit-animation-name: slideouttotop;
    -webkit-animation-duration: 200ms;
    transform: translateY(-100%);
    animation-name: slideouttotop;
    animation-duration: 200ms;
}
@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideinfromtop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@-webkit-keyframes slideouttotop {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@keyframes slideouttotop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}
/* slide up */
.slideup.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
}
.slideup.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfrombottom;
    -webkit-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfrombottom;
    animation-duration: 250ms;
}
.slideup.in.reverse {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 150ms;
    animation-name: fadein;
    animation-duration: 150ms;
}
.slideup.out.reverse {
    -webkit-transform: translateY(100%);
    -webkit-animation-name: slideouttobottom;
    -webkit-animation-duration: 200ms;
    transform: translateY(100%);
    animation-name: slideouttobottom;
    animation-duration: 200ms;
}
@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideinfrombottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@keyframes slideouttobottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-flip {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: absolute;
}
.flip {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
    backface-visibility: hidden;
    transform: translateX(0);
}
.flip.out {
    -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 175ms;
    transform: rotateY(-90deg) scale(.9);
    animation-name: flipouttoleft;
    animation-duration: 175ms;
}
.flip.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 225ms;
    animation-name: flipintoright;
    animation-duration: 225ms;
}
.flip.out.reverse {
    -webkit-transform: rotateY(90deg) scale(.9);
    -webkit-animation-name: flipouttoright;
    transform: rotateY(90deg) scale(.9);
    animation-name: flipouttoright;
}
.flip.in.reverse {
    -webkit-animation-name: flipintoleft;
    animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-turn {
    -webkit-perspective: 200px;
    perspective: 200px;
    position: absolute;
}
.turn {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
    -webkit-transform-origin: 0;

    backface-visibility :hidden;
    transform: translateX(0);
    transform-origin: 0;
}
.turn.out {
    -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 125ms;

    transform: rotateY(-90deg) scale(.9);
    animation-name: flipouttoleft;
    animation-duration: 125ms;
}
.turn.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 250ms;
    animation-name: flipintoright;
    animation-duration: 250ms;

}
.turn.out.reverse {
    -webkit-transform: rotateY(90deg) scale(.9);
    -webkit-animation-name: flipouttoright;
    transform: rotateY(90deg) scale(.9);
    animation-name: flipouttoright;
}
.turn.in.reverse {
    -webkit-animation-name: flipintoleft;
    animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}
/* flow transition */
.flow {
    -webkit-transform-origin: 50% 30%;
    transform-origin: 50% 30%;  
}
.flow.out {
    -webkit-transform: translateX(-100%) scale(.7);
    -webkit-animation-name: flowouttoleft;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 350ms;
    transform: translateX(-100%) scale(.7);
    animation-name: flowouttoleft;
    animation-timing-function: ease;
    animation-duration: 350ms;
}
.flow.in {
    -webkit-transform: translateX(0) scale(1);
    -webkit-animation-name: flowinfromright;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 350ms;
    transform: translateX(0) scale(1);
    animation-name: flowinfromright;
    animation-timing-function: ease;
    animation-duration: 350ms;
}
.flow.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: flowouttoright;
    transform: translateX(100%);
    animation-name: flowouttoright;
}
.flow.in.reverse {
    -webkit-animation-name: flowinfromleft;
    animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
    0% { -webkit-transform: translateX(0) scale(1); }
    60%, 70% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(-100%) scale(.7); }
}
@keyframes flowouttoleft {
    0% { transform: translateX(0) scale(1); }
    60%, 70% { transform: translateX(0) scale(.7); }
    100% { transform:  translateX(-100%) scale(.7); }
}
@-webkit-keyframes flowouttoright {
    0% { -webkit-transform: translateX(0) scale(1); }
    60%, 70% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform:  translateX(100%) scale(.7); }
}
@keyframes flowouttoright {
    0% { transform: translateX(0) scale(1); }
    60%, 70% { transform: translateX(0) scale(.7); }
    100% { transform:  translateX(100%) scale(.7); }
}
@-webkit-keyframes flowinfromleft {
    0% { -webkit-transform: translateX(-100%) scale(.7); }
    30%, 40% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(0) scale(1); }
}
@keyframes flowinfromleft {
    0% { transform: translateX(-100%) scale(.7); }
    30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
    0% { -webkit-transform: translateX(100%) scale(.7); }
    30%, 40% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(0) scale(1); }
}
@keyframes flowinfromright {
    0% { transform: translateX(100%) scale(.7); }
    30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
文章标签：
JavaScript
前端开发
iOS开发
cometwo123
目录
相关文章
龙腾九州
|
3月前
元素的浮动属性float
元素的浮动属性float。
龙腾九州
16 6
夏天49597
|
6月前
|
前端开发 开发者
CSS进阶-2D变换：translate, rotate, scale
【6月更文挑战第15天】CSS 2D变换如`translate`、`rotate`和`scale`赋予了网页设计灵活性，无需改动HTML即可实现元素移动、旋转和缩放。本文详解这三个属性，讨论使用中的问题和解决方案，并提供代码示例。例如，`translate(50px, 100px)`平移元素，`rotate(45deg)`顺时针旋转45度，`scale(1.5, 1)`水平放大1.5倍。理解百分比、旋转中心和缩放影响，结合transform-origin和注释，能帮助开发者更好地掌握这些技巧。
夏天49597
120 4
多加点香菜85
|
7月前
transform实现按钮边框旋转效果
transform实现按钮边框旋转效果
多加点香菜85
38 0
仙鹤童子```
|
前端开发
CSS transform实现按钮边框旋转效果
CSS transform实现按钮边框旋转效果
仙鹤童子```
135 1
田八
|
前端开发
今天来讲讲 scale、translate 和 rotate 这三个属性，你不会以为我是要讲的是 transform 吧？
总所周知，transform 是 CSS3 中最强大的属性之一，它有这么三个函数属性值：scale、translate 和 rotate，它们分别是缩放、位移和旋转，但是你有没有想过有这么一天它们三个
田八
305 0
今天来讲讲 scale、translate 和 rotate 这三个属性，你不会以为我是要讲的是 transform 吧？
代码与野兽
|
前端开发 JavaScript 中间件
关于浮动元素，你还在自己计算位置吗？来看看 Floating UI 吧！
关于浮动元素，你还在自己计算位置吗？来看看 Floating UI 吧！
代码与野兽
295 0
游客5iyiu2o7vjvko
|
前端开发
新的 CSS 属性：aspect-ratio 为元素设置宽高比
新的 CSS 属性：aspect-ratio 为元素设置宽高比
游客5iyiu2o7vjvko
93 0
解圃
|
图形学
【Transform3D】转换详解（看完就会）
【Transform3D】转换详解（看完就会）
解圃
88805 1
【Transform3D】转换详解（看完就会）
小解同志
CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会）
CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会）
小解同志
161 0
CSS3 transform 2D转换之移动 旋转 缩放（详细讲解看完就会）
CoderZ1010
|
图形学
Unity【DoTween】- 如何使Transform Tween动画序列可编辑
Unity【DoTween】- 如何使Transform Tween动画序列可编辑
CoderZ1010
502 0
Unity【DoTween】- 如何使Transform Tween动画序列可编辑

热门文章

最新文章

  • 1
    天猫精灵开放平台-之小百科测评
  • 2
    语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引
  • 3
    3D立方体图片切换动画
  • 4
    模态对话框和非模态对话框
  • 5
    java03
  • 6
    冒泡排序
  • 7
    Windows XP客户端加域操作手册上
  • 8
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 9
    Chapter 1: Creating the GUI Form and Adding Widgets
  • 10
    【Mockplus教程】帐号和购买
  • 1
    「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
    34
  • 2
    赋能加速AI应用交付，F5 BIG-IP Next for Kubernetes方案解读
    30
  • 3
    RAG分块策略：主流方法（递归、jina-seg）+前沿推荐（Meta-chunking、Late chunking、SLM-SFT）
    28
  • 4
    Python学习的自我理解和想法（2）
    30
  • 5
    Transformer图解
    36
  • 6
    API安全专题：如何有效应对新型Bot攻击？
    18
  • 7
    Selenium IDE：Web自动化测试的得力助手
    34
  • 8
    《docker高级篇（大厂进阶）：5.Docker-compose容器编排》包括是什么能干嘛去哪下、Compose核心概念、Compose使用三个步骤、Compose常用命令、Compose编排微服务
    51
  • 9
    24/7全时守护：AI视频监控技术的深度实现与应用分享
    43
  • 10
    《docker高级篇（大厂进阶）：6.Docker轻量级可视化工具Portainer》
    27

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月