html旋转_css3旋转木马

记得点击蓝字关注我们哦！

css3旋转木马 DOCTYPE html> < html   lang = "en" > < head >     < meta   charset = "UTF-8" >     < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >     < title >Document title >     < style >          /* 第二步：样式 */                   body  { /* 景深给body 因为是从整个屏幕看得 */ perspective :  1000 px ; background-color :  rgb ( 0 ,  0 ,  0 );         }                   section  {              position :  relative ;              width :  300 px ;              height :  200 px ; /* border: 1px solid red; */ /* 大盒子要居中  因为小盒子要移动一些距离 */              margin :  150 px   auto ; /* transform: rotateX(-70deg); */              transform-style :  preserve-3d ; /* 可以先把大盒子沿着X轴旋转一下  看得更清晰 */              animation : aa  8 s   linear   infinite ;         }                   @keyframes   aa  {             0% {}             100% {   transform :  rotateY ( 360 deg );             }         }                   div  { /* 通过绝对定位让所有的盒子重叠在一起 */              position :  absolute ;              width :  100 % ;              height :  100 % ;        background :  url ( 0.jpg )  no-repeat ;              background-size :  100 %   100 % ;   /* 给盒子添加阴影 (光效) */ box-shadow :  1 px   2 px   22 px   1 px   rgb ( 255 ,  255 ,  255 ); /* 给图片添加倒影效果 */ -webkit-box-reflect : below 10 px -webkit-gradient ( linear ,  left   top ,  left   bottom ,  from ( transparent ),  to ( rgba ( 255 ,  255 ,  255 ,  0.2 )));         }                   section   div :nth-child ( 1 ) { /* 第1个盒子直接往前平移一段距离即可 不需要旋转 */ transform :  translateZ ( 400 px );         }                   section   div :nth-child ( 2 ) { /* 第2个盒子先沿着Y轴旋转60deg  在沿着Z轴平移指定的距离 */ transform :  rotateY ( 60 deg )  translateZ ( 400 px );         }                   section   div :nth-child ( 3 ) { /* 第3个盒子先沿着Y轴旋转120deg  在沿着Z轴平移指定的距离 */ transform :  rotateY ( 120 deg )  translateZ ( 400 px );         }                   section   div :nth-child ( 4 ) { /* 第3个盒子先沿着Y轴旋转180deg  在沿着Z轴平移指定的距离 */ transform :  rotateY ( 180 deg )  translateZ ( 400 px );         }                   section   div :nth-child ( 5 ) { /* 第3个盒子先沿着Y轴旋转240deg  在沿着Z轴平移指定的距离 */ transform :  rotateY ( 240 deg )  translateZ ( 400 px );         }                   section   div :nth-child ( 6 ) { /* 第3个盒子先沿着Y轴旋转300deg  在沿着Z轴平移指定的距离 */ transform :  rotateY ( 300 deg )  translateZ ( 400 px );         }      style > head > < body >          < section >         < div > div >         < div > div >         < div > div >         < div > div >         < div > div >         < div > div >      section > body > html > 居然不会调格式，醉了....代码太乱了