本文详细介绍了CSS3中的过渡、2D变换、动画及3D变换等特性，并通过实例展示了如何创建复杂的3D效果，如立方体、电子相册及公转自转等。
一、过渡：transition: all 2s linear 1s; //执行渐变的属性、执行的时长、执行的曲线、延时执行的时长 ( ie9及其以前版本不支持 )
div{
width: 300px;
height: 300px;
background: red;
/*transition-property: all; //执行过渡的属性
transition-duration:3s ; //过渡的时长
transition-timing-function:linear; //过渡的曲线
transition-delay: 1s;*/ //过渡的延时
transition:all 2s linear 1s; //复合写法
margin: 30px auto;
}
div:hover{
transform:rotate(360deg);
transform-origin: right bottom;//设置旋转元素的几点位置
/*skew(45deg,0)斜切*/
/*scale(1.5)缩放*/
/*rotate(3000deg)旋转*/
/*translate(20px, 20px)位移偏移*/
}
二、2D： transform变换，属性包括：
transform: translate(10px, 20px); (偏移复合写法)； translateX(50px); (x轴方向偏移)；translateY(40px); (y轴方向偏移)；
transform: rotate(30deg); (旋转，单位是角度)；
transform: scale(2); （缩放）； transform: scale(2, 1.5); (x, y方向缩放倍数不同)；
transform: skew(45deg, 0); 翻转（斜切，倾斜，变形）；
三、 动画：
1、创建动画：
@keyframes animateName {
10%{ background: red; }
30%{ background: pink; }
50%{ background: gold; }
70%{ background: #00cc00; }
100%{ background: green; }
}
2、使用动画：
div{
width:300px; height:300px; background:purle;
animation-name: go; //动画名称
animation-duration: 5s; //动画时长
animation-timing-function: linear; //动画曲线
animation-delay: 1s; //动画延时
animation-iteration-count : infinite; //规定动画被播放的次数，默认是1次；infinite是无限循环播放
animation-direction : alternate; //规定动画是否在下一个周期逆向播放。默认是normal；
animation-play-state: running; //规定动画是否在运行或停止。running运行，paused暂停；
animation-fill-mode: forwards ; //动画完成后，保持最后一个属性值（停留在最后一幁，如：位置的属性值），而不是再回到原来的起始位置；
/* animation : go 5s linear 1s infinite; //复合写法 */
}
四、3D：
常见属性：
1、 除了x方向，y方向，还有一个z的方向的变换，即景深perspective，当需要使用到z轴方向偏移时，即使用translateZ的偏移时，就要给父级加上景深属性；
景深 perspective，它表示离屏幕多远的距离去观察元素，值越大，幅度越小（常用值900px-1200px），可以提供一个近大远小的效果；【给父级元素盒子加】
2、偏移：
transform : translate3d(10px, 20px, 50px ); //3d偏移，分别表示x, y, z的偏移
z轴方向偏移translateZ( 100px )；transform: translateZ( 500px ) ;
3、旋转：
transform : rotateX( 180deg ); //围绕x轴旋转；
transform : rotateY( 180deg ); //围绕y轴旋转；
transform : rotateZ( 180deg ); //围绕z轴旋转；等价于rotate( 180deg )；
4、3d透视（立体空间感）：如果需要看到空间立体的效果就需要改属性，如一个立方体； 【给父级元素盒子加】
transform-style: perserve-3d; // 3d视感的重要属性
<div>我是执行动画的盒子</div>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>立方体</title> 6 <link rel="stylesheet" href="css/reset.css" type="text/css" /> 7 <style type="text/css"> 8 ul{ 9 width: 200px; 10 height: 200px; 11 12 position: fixed; 13 left: 0; 14 right: 0; 15 top: 0; 16 bottom: 0; 17 margin: auto; 18 transform-style: preserve-3d; 19 transform: rotateX(0deg) rotateY(0deg); 20 animation: go 5s linear infinite; 21 perspective: 1000px; 22 } 23 ul li{ 24 border: 3px solid #00AAEC; 25 width: 200px; 26 height: 200px; 27 background: rgba(0,0,0,0.6); 28 color: red; 29 font-size: 30px; 30 position: absolute; 31 left: 0; 32 top: 0; 33 } 34 ul li:nth-child(1){ 35 transform: translateZ(100px); 36 } 37 ul li:nth-child(2){ 38 transform: translateZ(-100px); 39 } 40 ul li:nth-child(3){ 41 transform:rotateX(90deg) translateZ(-100px); 42 } 43 ul li:nth-child(4){ 44 transform:rotateX(90deg) translateZ(100px); 45 } 46 ul li:nth-child(5){ 47 transform:rotateY(90deg) translateZ(100px); 48 } 49 ul li:nth-child(6){ 50 transform:rotateY(90deg) translateZ(-100px); 51 } 52 @keyframes go{ 53 100%{ 54 transform: rotateX(360deg) rotateY(360deg); 55 } 56 } 57 </style> 58 </head> 59 <body> 60 <ul> 61 <li>1</li> 62 <li>2</li> 63 <li>3</li> 64 <li>4</li> 65 <li>5</li> 66 <li>6</li> 67 </ul> 68 </body> 69 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3d电子相册</title> 6 <link rel="stylesheet" href="css/reset.css" type="text/css"/> 7 <style type="text/css"> 8 body,html{ 9 height: 100%; 10 } 11 body{ 12 background: url(images/xk.jpg) no-repeat center; 13 } 14 div{ 15 width: 400px; 16 height: 300px; 17 transform-style: preserve-3d; 18 position: fixed; 19 left: 0; 20 right: 0; 21 top: 0; 22 bottom: 0; 23 margin: auto; 24 animation: go 30s linear infinite; 25 26 } 27 div img{ 28 position: absolute; 29 left: 0; 30 top: 0; 31 width: 400px; 32 height: 300px; 33 } 34 div img:nth-child(1){ 35 transform: translateZ(700px); 36 } 37 div img:nth-child(2){ 38 transform: rotateY(36deg) translateZ(700px); 39 } 40 div img:nth-child(3){ 41 transform: rotateY(72deg) translateZ(700px); 42 } 43 div img:nth-child(4){ 44 transform: rotateY(108deg) translateZ(700px); 45 } 46 div img:nth-child(5){ 47 transform: rotateY(144deg) translateZ(700px); 48 } 49 div img:nth-child(6){ 50 transform: rotateY(180deg) translateZ(700px); 51 } 52 div img:nth-child(7){ 53 transform: rotateY(216deg) translateZ(700px); 54 } 55 div img:nth-child(8){ 56 transform: rotateY(252deg) translateZ(700px); 57 } 58 div img:nth-child(9){ 59 transform: rotateY(288deg) translateZ(700px); 60 } 61 div img:nth-child(10){ 62 transform: rotateY(324deg) translateZ(700px); 63 } 64 @keyframes go{ 65 0%{ 66 transform: rotateX(0deg) rotateY(0deg); 67 } 68 25%{ 69 transform: rotateX(20deg) rotateY(180deg); 70 } 71 50%{ 72 transform: rotateX(0deg) rotateY(360deg); 73 } 74 75%{ 75 transform: rotateX(-20deg) rotateY(580deg); 76 } 77 100%{ 78 transform:rotateX(0deg) rotateY(720deg); 79 } 80 } 81 </style> 82 </head> 83 <body> 84 <div> 85 <img src="images/pic1.jpg" alt="" /> 86 <img src="images/pic2.jpg" alt="" /> 87 <img src="images/pic3.jpg" alt="" /> 88 <img src="images/pic4.jpg" alt="" /> 89 <img src="images/pic5.jpg" alt="" /> 90 <img src="images/pic6.jpg" alt="" /> 91 <img src="images/pic7.jpg" alt="" /> 92 <img src="images/pic8.jpg" alt="" /> 93 <img src="images/pic9.jpg" alt="" /> 94 <img src="images/pic10.jpg" alt="" /> 95 </div> 96 <audio src="audio/aaaaa.mp3" autoplay></audio> 97 </body> 98 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3d-公转与自转</title> 6 <link rel="stylesheet" href="css/reset.css" type="text/css" /> 7 <style type="text/css"> 8 body,html{ 9 height: 100%; 10 } 11 body{ 12 background: url(images/xk.jpg) no-repeat center; 13 background-size: cover; 14 } 15 .center{ 16 width: 250px; 17 height: 250px; 18 position: fixed; 19 left: 0; 20 right: 0; 21 top: 0; 22 bottom: 0; 23 margin: auto; 24 transform-style: preserve-3d; 25 animation: go 10s linear infinite; 26 } 27 .circle span{ 28 position: absolute; 29 left: 0; 30 top: 0; 31 display: block; 32 width: 250px; 33 height: 250px; 34 border-radius: 50%; 35 border: 1px solid gold; 36 box-shadow: 0px 0px 40px rgba(243,234,0,0.6); 37 } 38 .circle span:nth-child(2){ 39 transform: rotateX(40deg); 40 } 41 .circle span:nth-child(3){ 42 transform: rotateX(80deg); 43 } 44 .circle span:nth-child(4){ 45 transform: rotateX(120deg); 46 } 47 .circle span:nth-child(5){ 48 transform: rotateX(160deg); 49 } 50 .circle span:nth-child(6){ 51 transform: rotateX(200deg); 52 } 53 .circle span:nth-child(7){ 54 transform: rotateX(240deg); 55 } 56 .circle span:nth-child(8){ 57 transform: rotateX(280deg); 58 } 59 .circle span:nth-child(9){ 60 transform: rotateX(320deg); 61 } 62 .circle span:nth-child(10){ 63 transform: rotateY(40deg); 64 } 65 .circle span:nth-child(11){ 66 transform: rotateY(80deg); 67 } 68 .circle span:nth-child(12){ 69 transform: rotateY(120deg); 70 } 71 .circle span:nth-child(13){ 72 transform: rotateY(160deg); 73 } 74 .circle span:nth-child(14){ 75 transform: rotateY(200deg); 76 } 77 .circle span:nth-child(15){ 78 transform: rotateY(240deg); 79 } 80 .circle span:nth-child(16){ 81 transform: rotateY(280deg); 82 } 83 .circle span:nth-child(17){ 84 transform: rotateY(320deg); 85 } 86 .box01{ 87 width: 450px; 88 height: 450px; 89 border-radius: 50%; 90 border: 4px solid #fff; 91 position: fixed; 92 left: 0; 93 right: 0; 94 top: 0; 95 bottom: 0; 96 margin: auto; 97 transform: rotateX(70deg) rotateY(-20deg); 98 box-shadow: 5px 5px 100px #fff; 99 transform-style: preserve-3d; 100 animation: gogo 15s linear infinite; 101 } 102 .box01 span{ 103 width: 60px; 104 height: 60px; 105 border-color: #c72ade; 106 box-shadow: 0px 0px 40px rgba(199,42,222,0.6); 107 left: 40px; 108 } 109 .box02{ 110 width: 750px; 111 height: 750px; 112 border-radius: 50%; 113 border: 4px solid #fff; 114 position: fixed; 115 left: 0; 116 right: 0; 117 top: 0; 118 bottom: 0; 119 margin: auto; 120 transform: rotateX(70deg) rotateY(-20deg); 121 box-shadow: 5px 5px 100px #fff; 122 transform-style: preserve-3d; 123 animation: gogo 8s linear infinite; 124 } 125 .box02 span{ 126 width: 100px; 127 height: 100px; 128 border-color: #ff6a07; 129 box-shadow: 0px 0px 40px rgba(255,106,7,0.6); 130 left: 90px; 131 top: 590px; 132 133 } 134 .box03{ 135 width: 1000px; 136 height: 1000px; 137 border-radius: 50%; 138 border: 4px solid #fff; 139 position: fixed; 140 left: 0; 141 right: 0; 142 top: 0; 143 bottom: 0; 144 margin: auto; 145 transform: rotateX(70deg) rotateY(-20deg); 146 box-shadow: 5px 5px 100px #fff; 147 transform-style: preserve-3d; 148 animation: gogo 6s linear infinite; 149 } 150 .box03 span{ 151 width: 130px; 152 height: 130px; 153 border-color: #1eab99; 154 box-shadow: 0px 0px 40px rgba(30,171,153,0.6); 155 left: 770px; 156 top: 60px; 157 158 } 159 @keyframes go{ 160 0%{ 161 transform: rotateX(0deg) rotateY(0deg); 162 } 163 100%{ 164 transform: rotateX(360deg) rotateY(360deg); 165 } 166 } 167 @keyframes gogo{ 168 0%{ 169 transform: rotateX(70deg) rotateY(-20deg) rotateZ(0deg); 170 } 171 100%{ 172 transform: rotateX(70deg) rotateY(-20deg) rotateZ(360deg); 173 } 174 } 175 </style> 176 </head> 177 <body> 178 <div class="center circle"> 179 <span></span><span></span><span></span><span></span> 180 <span></span><span></span><span></span><span></span> 181 <span></span><span></span><span></span><span></span> 182 <span></span><span></span><span></span><span></span> 183 <span></span><span></span> 184 </div> 185 <div class="box01 circle"> 186 <span></span><span></span><span></span><span></span> 187 <span></span><span></span><span></span><span></span> 188 <span></span><span></span><span></span><span></span> 189 <span></span><span></span><span></span><span></span> 190 <span></span><span></span> 191 </div> 192 <div class="box02 circle"> 193 <span></span><span></span><span></span><span></span> 194 <span></span><span></span><span></span><span></span> 195 <span></span><span></span><span></span><span></span> 196 <span></span><span></span><span></span><span></span> 197 <span></span><span></span> 198 </div> 199 <div class="box03 circle"> 200 <span></span><span></span><span></span><span></span> 201 <span></span><span></span><span></span><span></span> 202 <span></span><span></span><span></span><span></span> 203 <span></span><span></span><span></span><span></span> 204 <span></span><span></span> 205 </div> 206 </body> 207 </html>
扫一扫
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
