CSS3-Tricks: 3D-Flip Hover Animation für Serviceboxen

CSS3-Tricks: Coole 3D-Animationen mit Hover-Effekt erstellen

the-cube-service-box

Auf der Webseite von Code My UI habe ich eine interessante Anleitung zur Erstellung von CSS3-Animationen mit tollen Hover-Effekten gefunden.

Die 3D-Flip-Animation können Sie sehr gut auf einem Privat-Portfolio oder auf einer Service-Webseite verwenden, wo Sie mit mehreren Boxen verschiedene Dienstleistungen anbieten können.

Wenn Sie mit der Maus über die 4 verschiedenfarbigen Boxen fahren, rotieren diese mit einem 3D-Flip und zeigen – die zuerst versteckten – zusätzlichen Infos zu Ihren angebotenen Diensten. Entworfen hat das coole Projekt Rahul Dhiman, auf CodePen.io können Sie sein Projekt live bearbeiten und die Hover-Effekte je nach Lust und Laune bearbeiten.

HTML:


    

Service box

design

design

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure

php

php developer

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure

Ui Developer

Developer

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure

java script

java script

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure

CSS-Anweisungen:

h1{
             font-size:25px;
             text-align: left;
             text-transform:capitalize;
         }
        .service-box{
            position: relative;
            overflow: hidden;
            margin-bottom:10px;
            perspective:1000px;
            -webkit-perspective:1000px;
        }
        .service-icon{
            width: 100%;
            height: 220px;
            padding: 20px;
            text-align: center;
            transition: all .5s ease;
        }

        .service-content{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0;
            width: 100%;
            height: 220px;
            padding: 20px;
            text-align: center;
            transition: all .5s ease;
            background-color: #474747;
            backface-visibility:hidden;
            transform-style: preserve-3d;
            -webkit-transform: translateY(110px) rotateX(-90deg);
            -moz-transform: translateY(110px) rotateX(-90deg);
            -ms-transform: translateY(110px) rotateX(-90deg);
            -o-transform: translateY(110px) rotateX(-90deg);
            transform: translateY(110px) rotateX(-90deg);
        }
        .service-box .service-icon .front-content{
            position: relative;
            top:80px;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .service-box .service-icon .front-content i {
            font-size: 28px;
            color: #fff;
            font-weight: normal;
        }

        .service-box .service-icon .front-content h3 {
            font-size: 15px;
            color: #fff;
            text-align: center;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .service-box .service-content h3 {
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            margin-bottom:10px;
            text-transform: uppercase;
        }
        .service-box .service-content p {
            font-size: 13px;
            color: #b1b1b1;
            margin:0;
        }
        .yellow{background-color: #ffc000;}
        .orange{background-color: #fc7f0c;}
        .red{background-color: #e84b3a;}
        .grey{background-color: #474747;}
        .service-box:hover .service-icon{
            opacity: 0;
            -webkit-transform: translateY(-110px) rotateX(90deg);
            -moz-transform: translateY(-110px) rotateX(90deg);
            -ms-transform: translateY(-110px) rotateX(90deg);
            -o-transform: translateY(-110px) rotateX(90deg);
            transform: translateY(-110px) rotateX(90deg);
        }
        .service-box:hover .service-content {
            opacity: 1;
            -webkit-transform: rotateX(0);
            -moz-transform: rotateX(0);
            -ms-transform: rotateX(0);
            -o-transform: rotateX(0);
            transform: rotateX(0);
        }

Originaldaten herunterladen: Github.com

Wichtig!
Ich möchte Sie darauf aufmerksam machen, dass diese Beispiele nur in den neuesten und aktuellsten Browsern funktionieren. In den Mobilversionen werden die 3D-Animationen möglicherweise fehlerhaft bis gar nicht dargestellt!
Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone