css3中添加了很多新的标签
可以通过这些属性来对一个平面图形操作达到一个立体的效果
| 函数 | 描述 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵 |
| translate3d(x,y,z) | 定义 3D 转化 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值 |
| scale3d(x,y,z) | 定义 3D 缩放转换 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转 |
| perspective(n) | 定义 3D 转换元素的透视视图 |
红色的标签就是这次案例里面所用到的
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .container { 14 width: 200px; 15 height: 200px; 16 margin: 200px auto; 17 border: 1px solid black; 18 perspective: 800px; 19 transform-origin: center center; 20 } 21 22 #divE { 23 width: 200px; 24 height: 200px; 25 position: relative; 26 transform-style: preserve-3d; 27 transform-origin: center center -50px; 28 } 29 30 #divE figure { 31 width: 200px; 32 height: 200px; 33 left: 0; 34 top: 0; 35 /*display: block;*/ 36 position: absolute; 37 transform-origin: center center; 38 } 39 40 .front { 41 transform: rotateY( 0deg) translateZ( 100px); 42 background: red; 43 opacity: 0.5; 44 } 45 46 .back { 47 transform: rotateY( 180deg) translateZ( 100px); 48 background: blue; 49 opacity: 0.5; 50 } 51 52 .right { 53 transform: rotateY( 90deg) translateZ( 100px); 54 background: gold; 55 opacity: 0.5; 56 } 57 58 .left { 59 transform: rotateY( -90deg) translateZ( 100px); 60 background: green; 61 opacity: 0.5; 62 } 63 64 .top { 65 transform: rotateX( 90deg) translateZ( 100px); 66 background: lightblue; 67 opacity: 0.5; 68 } 69 70 .bottom { 71 transform: rotateX( -90deg) translateZ( 100px); 72 background: indigo; 73 opacity: 0.5; 74 } 75 76 .myfirst { 77 /*定义动画插件名变*/ 78 animation-name: myfirst; 79 /*定义动画完成一个周期需要的时间*/ 80 animation-duration: 2s; 81 /*定义动画开始的时间*/ 82 animation-delay: 1s; 83 /*定义动画的速度曲线,这是定义为匀速*/ 84 animation-timing-function: linear; 85 /*定义动画播放的次数,这里定义为重复*/ 86 animation-iteration-count: infinite; 87 /*定义下一周期是否逆向,这里定义为逆向*/ 88 animation-direction: alternate; 89 /*定义动画是否暂停播放,这里定义为播放*/ 90 animation-play-state: running; 91 } 92 93 @keyframes myfirst { 94 0% { 95 transform: rotate3d(0, 1, 0, 0deg); 96 /*transform: rotate3d(1, 0, 0, 0deg);*/ 97 transform-origin: center center; 98 } 99 100% { 100 transform: rotate3d(0, 1, 0, 360deg); 101 /*transform: rotate3d(1, 0, 0, 180deg);*/ 102 transform-origin: center center; 103 } 104 } 105 </style> 106 </head> 107 108 <body> 109 <div class="container"> 110 <div id="divE"> 111 <figure class="front">1</figure> 112 <figure class="back">2</figure> 113 <figure class="right">3</figure> 114 <figure class="left">4</figure> 115 <figure class="top">5</figure> 116 <figure class="bottom">6</figure> 117 </div> 118 </div> 119 </body> 120 <script> 121 var a = document.getElementById("divE"); 122 // alert(a); 123 a.onclick = function() { 124 a.className = "myfirst"; 125 } 126 a.onmouseleave = function() { 127 a.className = a.className.replace("myfirst", " "); 128 } 129 </script> 130 131 </html>
第一,先要有六个div前后,左右,上下;在六个div外面需要一个父级容器,在父级的外部需要一个