CSS3D effects and css33d flip Effects

CSS3D effects and css33d flip Effects

The result is a light box on the right of this blog, from the webpack homepage (IE detour 0_0)

Github address: http://wjf444128852.github.io/demo02/css3/css3d/

Ideas:

1. The key is the two attributes of the parent element ul.

A: transform-style: preserve-3d;

B: transform: rotateX (-33.5deg) rotateY (45deg );

Let ul rotate a little offset first!

2. Make sure that the distance between the li and the left and right sides of each li is half of the li width, and the background color of li on the 6 faces is gradient from the center to the surrounding area.

3. Use li as the shadow at the bottom, which requires special processing.

4. Define animation frames so that ul can pay attention to animation Parameters and compatibility.

/* Animation: name duration timing-function delay iteration-count direction ;*/
/* Name specifies the keyframe name to be bound to the selector .. */
/* The duration of the animation, in seconds or milliseconds. */
/* Timing-function specifies the animation speed curve. */
/* Delay specifies the delay before the animation starts. */
/* Iteration-count specifies the number of times the animation should be played. */
/* Direction specifies whether to play the animation in turn. */

The verification code is as follows:

HTML

<div class="will_rotate">        <ul class="rotate_parent">            <li class="tip_front"></li>            <li class="tip_back"></li>            <li class="tip_right"></li>            <li class="tip_left"></li>            <li class="tip_top"></li>            <li class="tip_bottom"></li>            <li class="tip_floor"></li>        </ul>   </div>

CSS

. Will_rotate {width: 150px; height: 150px; margin: 0 auto; position: relative ;}. rotate_parent ,. rotate_parent li {position: absolute; display: block ;}. rotate_parent {width: 100%; height: 100%; padding: 0;/* margin:-50px 0; */-webkit-transform-origin: 50px 50px; transform-origin: 50px 50px;-webkit-transform: rotateX (-33.5deg) rotateY (45deg); transform: rotateX (-33.5deg) rotateY (45deg);-webkit-tr Ansform-style: preserve-3d; transform-style: preserve-3d;-webkit-animation: willRotate 3 s release-in-out infinite 2 s; animation: willRotate 3 s transition-in-out infinite alternate;/* animation: name duration timing-function delay iteration-count direction; * // * name specifies the keyframe name to be bound to the selector .. * // * The duration of the animation, in seconds or milliseconds. * // * Timing-function specifies the animation speed curve. * // * Delay specifies the delay before the animation starts. * // * Iteration-count specifies the number of times the animation should be played. * // * Direction specifies whether to play the animation in turn. */Top: 20%;/* left: 50% ;*/}. rotate_parent. tip_back ,. rotate_parent. tip_front ,. rotate_parent. tip_left ,. rotate_parent. tip_right ,. rotate_parent. tip_top {background: radial-gradient (transparent 30%, rgba (, 91 ,. 2) 100% );}. rotate_parent li {width: 100px; height: 100px; transition:-webkit-transform 1 s transition-in-out; transition: transform 1 s transition-in-out ;}. rotate_parent. tip_front {-webkit-transform: translateZ (50px); transform: translateZ (50px );}. rotate_parent. tip_back {-webkit-transform: translateZ (-50px); transform: translateZ (-50px );}. rotate_parent. tip_right {-webkit-transform: rotateY (90deg) translateZ (50px); transform: rotateY (90deg) translateZ (50px );}. rotate_parent. tip_left {-webkit-transform: rotateY (90deg) translateZ (-50px); transform: rotateY (90deg) translateZ (-50px );}. rotate_parent. tip_top {-webkit-transform: rotateX (90deg) translateZ (50px); transform: rotateX (90deg) translateZ (50px );}. rotate_parent. tip_bottom {-webkit-transform: rotateX (90deg) translateZ (-50px); transform: rotateX (90deg) translateZ (-50px );}. rotate_parent. tip_floor {box-shadow:-300px 0 50px rgba (0, 0, 0 ,. 3);-webkit-backface-visibility: visible; width: 110px; height: 110px; left: 295px; background-color: transparent; -webkit-transform: rotateX (90deg) translateZ (-60px); transform: rotateX (90deg) translateZ (-60px);} @-webkit-keyframes willRotate {0% {transform: rotateX (-33.5deg) rotateY (45deg);} 100% {transform: rotateX (-33.5deg) rotateY (360deg);} @ keyframes willRotate {0% {transform: rotateX (-33.5deg) rotateY (45deg);} 100% {transform: rotateX (-33.5deg) rotateY (360deg );}}

Welcome to purchase --