集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都H5学习:css3可拖动的魔方3d

发布者: 成都达内     浏览次数:     发布时间:2019-05-07 11:37:00

成都H5学习:css3可拖动的魔方3d--主要用到知识点:css3 3d转换、原生js鼠标拖动事件、display:grid 布局、实现的功能、3d魔方 可点击,可拖动...

  成都H5学习:css3可拖动的魔方3d

  主要用到知识点:

  css3 3d转换

  原生js鼠标拖动事件

  display:grid 布局

  实现的功能

  3d魔方 可点击,可拖动

  直接看效果

  成都H5学习:css3可拖动的魔方3d

  html:

  成都H5学习:css3可拖动的魔方3d

  css:

  * {

  margin: 0;

  padding: 0;

  }

  html,

  body {

  width: 100%;

  height: 100%;

  background: #66677c;

  text-align: center;

  }

  .container {

  width: 300px;

  height: 300px;

  margin: 50px auto 150px;

  perspective: 1200px;

  }

  .container .box {

  width: 300px;

  height: 300px;

  position: relative;

  transform-style: preserve-3d;

  transition: transform 0.5s;

  }

  .container .box .pic {

  position: absolute;

  left: 0;

  top: 0;

  width: 300px;

  height: 300px;

  box-shadow: 0px 0px 5px #fff;

  }

  .container .box .pic img {

  width: 100%;

  height: 100%;

  cursor: pointer;

  }

  .container .box .pic:nth-child(1) {

  transform: translateZ(150px);

  }

  .container .box .pic:nth-child(2) {

  transform: rotateY(-180deg) translateZ(150px);

  }

  .container .box .pic:nth-child(3) {

  transform: rotateY(90deg) translateZ(150px);

  }

  .container .box .pic:nth-child(4) {

  transform: rotateY(-90deg) translateZ(150px);

  }

  .container .box .pic:nth-child(5) {

  transform: rotateX(90deg) translateZ(150px);

  }

  .container .box .pic:nth-child(6) {

  transform: rotateX(-90deg) translateZ(150px);

  }

  h1 {

  color: #fff;

  font-size: 30px;

  margin-bottom: 30px;

  }

  .btn {

  display: grid;

  justify-content: center;

  grid-template-columns: 100px 100px 100px;

  grid-template-rows: 100px 100px;

  grid-gap: 15px;

  }

  .btn input {

  width: 100px;

  height: 100px;

  outline: none;

  border: 2px solid #fff;

  }

  .btn input:focus {

  border: 2px solid #e70;

  }

  .defaul {

  transform: translateZ(-150px) rotateX(-10deg) rotateY(15deg);

  }

  .image1 {

  transform: translateZ(-150px) rotateX(0deg) rotateY(0deg);

  }

  .image2 {

  transform: translateZ(-150px) rotateY(-180deg);

  }

  .image3 {

  transform: translateZ(-150px) rotateY(-90deg);

  }

  .image4 {

  transform: translateZ(-150px) rotateY(90deg);

  }

  .image5 {

  transform: translateZ(-150px) rotateX(-90deg);

  }

  .image6 {

  transform: translateZ(-150px) rotateX(90deg);

  }

  js:

  (function(){

  var btn = document.getElementsByClassName('btn')[0];

  var box = document.getElementsByClassName('box')[0];

  btn.addEventListener('click',function(e){

  var className = e.target.className;

  if(className !== 'btn'){

  box.style = '';

  box.classList.replace(box.classList[1],'image'+className);

  }

  })

  //鼠标拖动效果

  var xN = 10, yN = 15;

  document.addEventListener('mousedown',function(e){

  e.preventDefault();

  e.stopPropagation();

  var x = e.clientX;

  var y = e.clientY;

  document.addEventListener('mousemove',move);

  document.addEventListener('mouseup', up);

  function move(e){

  e.preventDefault();

  e.stopPropagation();

  var x1 = e.clientX;

  var y1 = e.clientY;

  xN += (x1 - x)*0.04;

  yN += (y1 - y)*0.04;

  box.style.transform = 'translateZ(-150px) rotateY(' + xN + 'deg) rotateX(' + -yN + 'deg)';

  }

  function up(){

  document.removeEventListener('mousemove', move);

  }

  })

  })()

  成都达内H5免费训练营招生中,帮助大家更好的了解行业,熟悉IT行业最热门的技术,选择最适合自己的技术课程进行学习,一方面节省自己盲目了解的时间,另一方面也能够对行业有足够的了解,定制自己的职业规划。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56