The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> whole element flip
MindyT
post Oct 6 2015, 11:15 AM
Post #1


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
Hi, I'm trying to get the whole rectangular to flip not just the words. I'm using the example on http://davidwalsh.name/css-flip but it 's not working. Any help would be much appreciated.
CODE

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
    background-color:purple;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}

/*
    Some vertical flip updates
*/
.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container:hover .back {
        transform: rotateX(0deg);
    }

    .vertical.flip-container:hover .front {
        transform: rotateX(180deg);
    }
</style>
</head>

<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
        hi
        </div>
        <div class="back">
            bye
        </div>
    </div>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 7 2015, 08:31 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You copied the CSS of the main page and made changes to it, some of which you shouldn't have made. Just compare your CSS to the one at the Walsh site. Be aware that that CSS only shows the standard CSS3 properties, without the necessary vendor prefixes, which are needed for some of the properties. Rather go to the demo page, inspect the demo elements you want to use and look at the corresponding CSS (inside the HEAD of the page).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MindyT
post Oct 7 2015, 03:18 PM
Post #3


Advanced Member
****

Group: Members
Posts: 165
Joined: 12-November 13
Member No.: 19,963
I got it! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 7 2015, 04:22 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You're welcome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 09:45 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC