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

最新推荐文章于 2022-10-25 17:44:58 发布
最新推荐文章于 2022-10-25 17:44:58 发布
阅读量750 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/20664
版权

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); }
}
weixin_34245082
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Transform变换
hp0524chl的博客
10-19 535
而且它还可以使用方便的RenderTransformOrigin属性值，从而可以为特定的变换（如旋转）使用相对坐标。包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在。包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，
transform属性实现翻转效果
weixin_30348519的博客
09-22 638
transform:perspective(800px) rotateY(180deg);//翻转180度，透视800px; transition-delay: 0.3s;//过程时间 opacity: 1;//配合透明度更好:hover{} 产生过程效果 转载于:https://www.cnblogs.com/Neilisme/p/7574896.html...
使用transform制作书本翻页效果
苦作舟的空城机
11-06 1476
transform transform属于CSS属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 在网页中需要制作一些有立体感的3d效果，比如书本翻页 tansform中有一个rotate旋转属性 属性 功能 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(an
css-transform-案例-翻转牌效果
pyhui的技术博客
06-17 621
思路 外部盒子包两个盒子 外部盒子绝对定位，内部两盒子相对定位 外部盒子hover触发内部盒子的变形 内部盒子变形的具体调整 完整代码 <style> .outter{ border: 2px solid black; position:relative; width: 800px; height: 300px; ...
Qt/QML　翻转效果实例
11-02
在本文中，我们将深入探讨如何使用Qt/QML实现翻转效果。Qt是一个强大的跨平台应用程序开发框架，而QML是其内置的一种声明式语言，用于构建用户界面。在这个实例中，我们将关注如何利用QML创建一个具有翻转效果的列表...
css3 transform属性制作鼠标点击3D图片叠加动画效果
11-24
本教程将深入探讨如何利用CSS3的transform属性来创建一个鼠标点击触发的3D图片叠加动画效果。 首先，我们要理解`transform`属性的基本用法。`transform`可以接受多个函数，如`translate()`, `rotate()`, `scale()`,...
Qml翻转效果QmlFlipImage.7z
07-20
翻转效果的实现主要依赖于QML的Transform组件，特别是Rotation和Scale变换。Rotation用于改变元素的旋转角度，而Scale则可以调整元素的缩放比例。通过结合这两个属性，我们可以模拟出物体在空间中的翻转动作。 1. *...
CSS transform-origin属性的理解
09-22
**CSS transform-origin属性详解** **一、属性定义与作用** `transform-origin` 是CSS3中的一个变换属性，它用于指定元素在进行旋转、...通过深入理解和熟练运用，我们可以创造出更多富有创意和吸引力的网页效果。
翻转效果翻转效果翻转效果
03-12
在翻转效果中，主要利用了`transform`属性中的`rotateX()`, `rotateY()`, 或 `rotateZ()` 方法，这些方法可以按照指定的角度旋转元素。 2. **CSS3实现翻转效果**： - **X轴翻转**：通过设置`transform: rotateX...
PyTorch ：transforms 数据增强：裁剪、翻转、旋转
qq_54641516的博客
09-21 1万+
学习数据预处理模块 transforms 中的数据增强方法：裁剪、翻转和旋转 ​ 来自：YEY 的博客 ​
2021-11-22 transform属性的用法和示例,使用transform属性实现扑克牌的正反面翻转,transition属性的用法和示例,
GAARA
11-22 269
文章目录 零.transform的用法 1.属性值translate:转换 2.属性值scale:缩放 3,属性值rotate:旋转 4.属性值skew:倾斜 一.示例:点击翻转扑克牌正反面 1. 注意事项 2.完整代码 3.知识点 3.1.transition属性用于设置元素的过渡效果 3.2.div:hover #one还是div #one:hover? 二.改进:在js中调用元素的transform属性 1.css样式不变,除了hover部分 2..完整代码 3.图片资源 back.png front
卡片翻转效果实现 以及 transform常用属性详解
EmotionComputer
12-18 1725
一. 实现思路： 在一个大的div里放两个div 把第二个div翻转180度，并设置faceback-visibility: hidden;这样就会将第二个div的正面隐藏起来。 动态添加class，让最外层的大div进行旋转(里面的div也会跟着旋转)，注意:正面与反面是一个相对的概念，在旋转后，子div相对于父div的正面还是反面是不会变的，所以旋转后第一个div还是处于隐藏的状态 实现代...
css-样式 transform旋转效果
lijieaace的博客
05-07 3035
1、rotate按角度旋转 img { width: 250px; transition: all 2s; } img:hover { /* 顺 */ transform: rotate(360deg); /* 逆 */ /* transform: rotate(-360deg); */ } 2、转换原点 transform-
transform : 盒子反转 和图片放大
m0_46581222的博客
04-06 277
transform : 盒子反转 和图片放大 学习笔记，也是方便以后查阅，欢迎友善探讨 详细的用法：https://www.w3school.com.cn/cssref/pr_transform.asp 这里记录在实际开发中用到较多的几个属性。 1.rotate旋转 transform: rotate(ndeg) 容器顺(逆)时针旋转。单位：deg(度)。整数顺时针，负数逆时针。 <!DOCTYPE html> <html lang="en"> <head> &
滚轮事件(wheel)与Transform实现图片上下翻滚
lqy455949477的博客
10-15 2303
通常在实现一些展示性的网页的时候，我们会选择两种方式：制作基于x轴的轮播插件，或者基于y轴上下翻滚的页面。前者的实现已经非常广泛，然而后者也有着非常不错的效果，而且实现起来更为简单。需要使用的仅仅是wheel事件和css3的transform的结合。首先，在较新版本的浏览器中，鼠标滚动事件已经被规整到WheelEvent中，为了保持兼容性，建议对以前的DOMMouseScroll和MouseWhee
CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例
NewHouser的博客
10-25 5895
transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离
[PyTorch 学习笔记] 2.3 二十二种 transforms 图片数据预处理方法
张贤的博客
08-27 2749
本章代码：https://github.com/zhangxiann/PyTorch_Practice/blob/master/lesson2/transforms/ 这篇主要分为几个部分介绍 transforms: 裁剪 旋转和翻转 图像变换 transforms 方法操作 自定义 transforms 方法 最后是数据增强的实战：对人民币二分类实验进行数增强。 由于图片经过 transform 操作之后是 tensor，像素值在 0~1 之间，并且标准差和方差不是正常图片的。所以定义了tran.
css3——transform：rotate（旋转）、scale（缩放）、skew（拉伸）、translate（平移）、transform-origin
热门推荐
zyz00000000的博客
09-28 1万+
注意：transform是复合属性，拆开写会替代，先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换：transform属性可以对元素进行移动、缩放、转动、拉长或拉伸 注意：Internet Explorer 9 要求前缀 -ms- 版本，Internet Explorer 10, Firefox, 和 Opera支持transform 属性，Chrome 和 Safari 要求...
transform属性
最新发布
05-01
transform属性是CSS3中用来控制元素变形的属性，可以通过它来实现元素旋转、缩放、移动、扭曲...总之，transform属性是CSS3中比较强大和重要的属性之一，可以为网页添加更加生动和动态的效果，提高用户的体验和交互性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值