CardFlip.css
/* |
Important: |
This is sample code demonstrating API, technology or techniques in development. |
Although this sample code has been reviewed for technical accuracy, it is not |
final. Apple is supplying this information to help you plan for the adoption of |
the technologies and programming interfaces described herein. This information |
is subject to change, and software implemented based on this sample code should |
be tested with final operating system software and final documentation. Newer |
versions of this sample code may be provided with future seeds of the API or |
technology. For information about updates to this and other developer |
documentation, view the New & Updated sidebars in subsequent documentation seeds. |
*/ |
/* |
File: CardFlip.css |
Abstract: Defines CSS properties for the CardFlip sample. |
Defines and styles the playing card on the "Card Flip" |
page. Applies 3D transform and transition effects to |
the card. Hides its "back-side" when it is flipped. |
Version: 1.0 |
Disclaimer: IMPORTANT: This Apple software is supplied to you by |
Apple Inc. ("Apple") in consideration of your agreement to the |
following terms, and your use, installation, modification or |
redistribution of this Apple software constitutes acceptance of these |
terms. If you do not agree with these terms, please do not use, |
install, modify or redistribute this Apple software. |
In consideration of your agreement to abide by the following terms, and |
subject to these terms, Apple grants you a personal, non-exclusive |
license, under Apple's copyrights in this original Apple software (the |
"Apple Software"), to use, reproduce, modify and redistribute the Apple |
Software, with or without modifications, in source and/or binary forms; |
provided that if you redistribute the Apple Software in its entirety and |
without modifications, you must retain this notice and the following |
text and disclaimers in all such redistributions of the Apple Software. |
Neither the name, trademarks, service marks or logos of Apple Inc. |
may be used to endorse or promote products derived from the Apple |
Software without specific prior written permission from Apple. Except |
as expressly stated in this notice, no other rights or licenses, express |
or implied, are granted by Apple herein, including but not limited to |
any patent rights that may be infringed by your derivative works or by |
other works in which the Apple Software may be incorporated. |
The Apple Software is provided by Apple on an "AS IS" basis. APPLE |
MAKES NO WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION |
THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS |
FOR A PARTICULAR PURPOSE, REGARDING THE APPLE SOFTWARE OR ITS USE AND |
OPERATION ALONE OR IN COMBINATION WITH YOUR PRODUCTS. |
IN NO EVENT SHALL APPLE BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL |
OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, |
MODIFICATION AND/OR DISTRIBUTION OF THE APPLE SOFTWARE, HOWEVER CAUSED |
AND WHETHER UNDER THEORY OF CONTRACT, TORT (INCLUDING NEGLIGENCE), |
STRICT LIABILITY OR OTHERWISE, EVEN IF APPLE HAS BEEN ADVISED OF THE |
POSSIBILITY OF SUCH DAMAGE. |
Copyright (C) 2008 Apple Inc. All Rights Reserved. |
*/ |
body |
{ |
margin: 0px; |
-webkit-user-select: none; |
} |
/* Styles the "Card Flip" page and creates a placeholder for the card */ |
#container |
{ |
/* Set these dimensions so the card can be properly displayed in Safari on iPhone */ |
height: 356px; |
width: 320px; |
background-color: rgba(56,108,179, 0.5); |
/* Disable tap highlighting */ |
-webkit-tap-highlight-color: rgba(0,0,0,0); |
/* Give some depth to the card */ |
-webkit-perspective: 600; |
} |
/* Applies 3D transform and transition effects to the card. The card has two states: regular and flipped. |
A card is in a regular state when there is an empty transform applied to it, and otherwise in a flipped |
state, where there is a rotational transformation applied. This class is used when the card is in the regular state. |
The "card flipped" class is used when the card is in the flipped state. |
*/ |
.card |
{ |
position: absolute; |
height: 300px; |
width: 200px; |
left: 60px; |
top: 28px; |
/* Ensure that the card lives correctly in 3D space */ |
-webkit-transform-style: preserve-3d; |
/* We apply this property to the card so it can smoothly flip between its sides */ |
-webkit-transition-property: -webkit-transform; |
/* Make the animation occur over a period of 1.5 seconds */ |
-webkit-transition-duration: 1.5s; |
} |
/* Applies the flip animation to the card */ |
.card.flipped |
{ |
/* Rotate the card 180 degrees along the y-axis. This animation allows the card to |
toggle between its regular and flipped states. */ |
-webkit-transform: rotateY(180deg); |
} |
/* Styles the card and hides its "back side" when the card is flipped */ |
.face |
{ |
position: absolute; |
height: 300px; |
width: 200px; |
/* Give a round layout to the card */ |
-webkit-border-radius: 10px; |
/* Drop shadow around the card */ |
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); |
/* Make sure that users will not be able to select anything on the card */ |
/* We create the card by stacking two div elements at the exact same location. The back of the card |
is shown when we rotated the card 180 degrees along the y-axis. Setting this property to hidden |
ensures that the "back side" is hidden when the card is flipped |
*/ |
-webkit-backface-visibility: hidden; |
} |
/* Styles the suit characters */ |
.face > p |
{ |
margin-top: 36px; |
margin-bottom: 0; |
text-align: center; |
font-size: 92px; |
} |
/* Styles the front of the card */ |
.front |
{ |
/* Set the color of the suit characters on the card */ |
color: rgb(78,150,249); |
/* Background color of this side of the card */ |
background-color: rgb(34,65,108); |
} |
/* Styles the back of the card */ |
.back |
{ |
color: rgb(34,65,108); |
background-color: rgba(78,150,249,0.5); |
/* Ensure the "back side" is flipped already */ |
-webkit-transform: rotateY(180deg); |
} |
Copyright © 2008 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2008-06-19