H5yuanquan.zip

  • PUDN用户
    了解作者
  • HTML
    开发工具
  • 2KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 1
    下载次数
  • 2017-07-07 16:52
    上传日期
块的旋转,让你通浏览器看见3D效果旋转图案,HTML5真是太强大了。
H5yuanquan.zip
  • H5yuanquan
  • css
  • img
  • js
  • new_file.html
    1.7KB
  • index.html
    123B
  • .project
    972B
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; perspective: 1000px; } #wrap{ width: 200px; height: 200px; border: 1px solid red; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 10s; -o-transition: all 10s; transition: all 10s; } #wrap div{ position: absolute; left: 0; top: 0; width: 200px; height: 200px; } </style> </head> <body> <div id="wrap"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> <script type="text/javascript"> var wrap = document.getElementById("wrap"); var divs = wrap.children; function rand(min,max){ return parseInt(Math.random()*(max-min)+min); } function randColor(){ return "rgba("+rand(0,256)+","+rand(0,256)+","+rand(0,256)+",1)"; } for (var i=0; i<divs.length; i++){ var deg = 360/divs.length; divs[i].style.transform = "rotateY("+deg*i+"deg) translateZ(500px)"; divs[i].style.backgroundColor = randColor(); } document.onclick = function (){ wrap.style.transform = "rotateY(360deg)"; } </script> </html>
评论
    相关推荐
    • HTML:HTML
      HTML:HTML
    • html相关
      html相关html相关html相关
    • htmlbasic
      html基本
    • Html教程
      Html教程 Html教程 Html教程 Html教程
    • HTML Refrence
      HTML参考手册,非常不错的做html的工具啊
    • html教程
      HTML教程关于基本语法的使用
    • html指南
      html查询指南,html格式
    • html
      html html 2021.03.22 HTML在Codecademy(chapter1)中的课程身体,头部,h,p,img,视频,标题,跨度,强壮,em 2021.03.23 HTML在Codecademy中学习课程(第2章)!DOCTYPE htmlhtml,table,thead,tbody ...
    • html element
      html element. 网页设计,标准html element,
    • html学习
      html入门学习,适合初学者