css animation - 3D effect
Internet Explorer 10 and Firefox support 3D, Chrome and Safari need webkit -, Opera and ie9 still don't support 3D conversion, it only supports 2D conversion
1, 3D conversion
3D flip method rotate
- Transform: rotate x (30DEG) by 30 ° along the X axis
- Transform: rotate y (30DEG) by 30 ° along Y axis
- Transform: rotate Z (30DEG) by 30 ° along Z axis
Note: Internet Explorer and Opera do not support rotateX, rotateY, rotateZ
3D displacement translate
-transform:translate3d (30px,30px.800px) X axis moves 30px, Y axis moves 30px, Z axis moves 800px
- transform:translateX(30px) translateY(30px) translateZ(800px)
- transform:translateZ(800px) translate(30px,30px)
3D sight distance perspective
Element to use 3D effect requires perspective attribute
- < p >< /p >
- p{width:100px;height:100px;transform:perspective(200px) translate3d(0,0,-50px);background:#f0f;}
- < div >< p >< /p >< /div >
- div{perspective:200px}
- p{width:100px;height:100px;transform:translate3d(0,0,-50px);background:#f0f;}
3D conversion (3D scale flip) scaleZ
- Parent box settings
- perspective:1200px (3D sight distance)
- Transform style: preserve-3d (3D perspective)
- (child element keeps 3D position)
- transform-origin:left / top / right / bottom
- Flip position
Example:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D Sight distance-Cube</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} div{transition:3s;transform-style:preserve-3d;} ul{ width:200px; height:200px; margin:200px auto; position:relative;transform-style:preserve-3d;transform:rotateX(45deg) rotateY(45deg);} ul li{ width:200px; height:200px; position:absolute;opacity:.5; } ul li.top{ background:#ff0; transform:translateY(100px) rotateX(90deg);} ul li.bottom{ background:#f00;transform:translateY(100px) rotateX(90deg);} ul li.before{ background:#0f0;transform:translateZ(100px);} ul li.after{ background:#f99; transform:translateZ(-100px);} ul li.left{ background:#9f9;transform:translateX(-100px) rotateY(90deg);} ul li.right{ background:#00f;transform:translateX(100px) rotateY(90deg);} div:hover{ transform:rotateY(360deg);} </style> </head> <body> <div> <ul> <li class="top"></li> <li class="bottom"></li> <li class="before"></li> <li class="after"></li> <li class="left"></li> <li class="right"></li> </ul> </div> </body> </html>
3D navigation
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3D Navigation</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} ul{width:200px; height:200px; margin:200px auto;} ul li{width:200px; height:200px;position:relative; transform-style:preserve-3d; transition:.5s; } ul li i{position:absolute;width:200px; height:200px;} ul li i img{ width:200px; height:200px;} ul li i:nth-child(1){ transform:translateZ(100px);} ul li i:nth-child(2){ transform:translateY(100px) rotateX(-90deg);} ul li i:nth-child(3){ transform:translateZ(-100px) rotateX(180deg);} ul li:hover{ transform:rotateX(90deg);} ul li:active{ transform:rotateX(180deg);} </style> </head> <body> <ul> <li> <i><img src="1 .jpg"/></i> <i><img src="2.jpg"/></i> <i><img src="1 .jpg"/></i> </li> </ul> </body> </html>
2, 3D animation
Create animation @ keyframes
Syntax: @ keyframes zidingyi {from {background: yellow;} to {background: green;} to {background: red;}}}
Note: when you use @ keyframes to create an animation, you need to bind it to the animation attribute of a selector, otherwise it will not produce an animation effect. By specifying at least two css3 animation attributes, the animation can be bound to the selector animation attribute: specifying the name of the animation and the duration of the animation.
- forwards keeps the last keyframe
- infinite play
- alternate rewind
- keyframes vary from 0% to 100%, and their later attributes should be consistent with the previous ones
Animation attribute animation
| animation-name | Animation name |
|---|---|
| animation-duration | Time, default 0 |
| animation-timing-function | Curve, default ease |
| animation-delay | Delay, default 0 |
| animation-iteration-count | Playback times, default 1 |
| animation-direction | Play after cycle |
| animation-play-state | Pause or not, default running |
| animation-fill-mode | State after animation |
Example: Animation: name 5S linear 2S infinite alternate
Key frame: from to 0% 100%
case
Block movement effect:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>animation</title> <style> //-forwards keeps the last keyframe //-infinite play //-alternate rewind //-keyframes vary from 0% to 100%, and their later attributes should be consistent with the previous ones *{ margin:0; padding:0;} div{ width:500px; height:500px; box-shadow:0 0 5px #000; margin:100px auto; position:relative; animation:dafangkuai 2s;} div .p1{ width:100px; height:100px; background:#99f; position:absolute; animation:fangkuai 2s 5 linear forwards ;} div .p2{ width:100px; height:100px; background:#00f; position:absolute; animation:xiaofangkuai 2s infinite alternate;} @keyframes fangkuai{ 0%{ left:0;top:0;} 25%{left:400px;top:0;} 50%{left:400px;top:400px;} 75%{left:0;top:400px;} 100%{left:200px;top:200px;} } @keyframes xiaofangkuai{ 0%{ left:0;top:0;} 25%{left:100px;top:400px;} 50%{left:200px;top:0;} 75%{left:300px;top:400px;} 100%{left:400px;top:0px;} } @keyframes dafangkuai{ 0%{ left:50px;top:50px;} 100%{left:400px;top:0;} } </style> </head> <body> <div class="box"> <p class="p1"></p> <p class="p2"></p> </div> </body> </html>
Water ripple effect:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ripple</title> <style> *{ margin:0; padding:0;} dl{ width:200px; height:200px; margin:100px auto; position:relative;} dl dd{ width:200px; height:200px; position:absolute;border-radius:50%; box-sizing:border-box;} dl:hover dd:nth-child(1){ border:2px solid #F00; animation:bowen 3s infinite linear;} dl:hover dd:nth-child(2){ border:2px solid #F90; animation:bowen 3s .4s infinite linear;} dl:hover dd:nth-child(3){ border:2px solid #FF0; animation:bowen 3s .8s infinite linear;} dl:hover dd:nth-child(4){ border:2px solid #0F0; animation:bowen 3s 1.2s infinite linear;} dl:hover dd:nth-child(5){ border:2px solid #9F0; animation:bowen 3s 1.6s infinite linear;} dl:hover dd:nth-child(6){ border:2px solid #00F; animation:bowen 3s 2s infinite linear;} dl:hover dd:nth-child(7){ border:2px solid #F0F; animation:bowen 3s 2.4s infinite linear;} dl dt{border-radius:50%;width:200px; height:200px; background:#000; color:#fff; font:700 40px/5 ""; text-align:center;position:absolute;} @keyframes bowen{ 0%{ transform:scale(1,1); opacity:1;} 100%{ transform:scale(2,2); opacity:0;} } </style> </head> <body> <dl> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dd></dd> <dt>Across me</dt> </dl> </body> </html>
Revolving wall:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Revolving wall</title> <style> *{ margin:0; padding:0;} li{ list-style:none;} div{perspective:800px; } div ul{width:200px; height:200px;position:relative; margin:100px auto; transform-style:preserve-3d; animation:xunzhuan 5s linear infinite ;} div ul li{width:200px; height:200px; position:absolute;transition:.5s;} div ul li:nth-child(1){ transform:translateZ(300px);} div ul li:nth-child(2){ transform:rotateY(45deg) translateZ(300px);} div ul li:nth-child(3){ transform:rotateY(90deg) translateZ(300px);} div ul li:nth-child(4){ transform:rotateY(135deg) translateZ(300px);} div ul li:nth-child(5){ transform:rotateY(180deg) translateZ(300px);} div ul li:nth-child(6){ transform:rotateY(225deg) translateZ(300px);} div ul li:nth-child(7){ transform:rotateY(270deg) translateZ(300px);} div ul li:nth-child(8){ transform:rotateY(315deg) translateZ(300px);} div ul li img{width:200px; height:200px;} div:hover ul{ animation-play-state:paused;} @keyframes xunzhuan{ 0%{ transform:rotateX(-15deg) rotateY(0)} 100%{transform:rotateX(-15deg) rotateY(360deg)} } </style> </head> <body> <div> <ul> <li><img src="1 .jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="1 .jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="1 .jpg"/></li> <li><img src="2.jpg"/></li> <li><img src="1 .jpg"/></li> <li><img src="2.jpg"/></li> </ul> </div> </body> </html>
