纯CSS炫酷的3D旋转

2018-02-01 18:40:04来源:cnblogs.com作者:Y.zoro人点击

分享

<html>
<head>
<meta charset="utf-8">
<title>纯CSS炫酷的3D旋转</title>

<style type="text/css">
.perspective{
  perspective:400px;

  /*perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

  当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。

  注释:perspective 属性只影响 3D 转换元素。*/

 
  position:relative;  /*relative 相对定位*/
  top:300px; /*离顶部的距离*/
  left:400px; /*离左边的距离*/

  width:300px; /*设置宽300px*/

  height:300px; /*设置高300px*/

}

/*去掉自定义列表的默认样式*/
ul{ margin:0; padding:0; list-style:none;}

 /*让所有li重叠*/
.cube li{
  width:305px;
  height:305px;
  position:absolute;
  top:0; left:0;
}

 /*设置li中div的样式,div也可以换成图片*/
.cube div{
  border:2px black solid;/*边框红色实线*/
  height:300px;
  width:300px;
}

div{width:100%;height:100%}

.cube{
  width:300px;
  transform:rotateY(45deg);  /*沿Y轴旋转*/
  transform-style:preserve-3d;  /*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。*/
  animation:rotate 5s infinite linear;
}
 /*创建自定义动画*/
@keyframes rotate{
  0%{ transform:rotateZ(0deg) rotateX(360deg) rotateY(360deg); }
  100%{transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg);}
}
.front{
  transform:rotateY(0deg) translateZ(150px);
  background:blue;
}
.back{
  transform:rotateY(180deg) translateZ(150px);
  background:green;
}
.left{
  transform:rotateY(90deg) translateZ(150px);
  background:yellow;
}
.right{
  transform:rotateY(-90deg) translateZ(150px);
  background:white;
}
.top{
  transform:rotateX(90deg) translateZ(150px);
  background:red;
}
.bottom{
  transform:rotateX(-90deg) translateZ(150px);
  background:orange;
}
</style>
</head>

<body>

<div class="perspective">
  <ul class="cube">
    <li class="front"><div></div></li>
    <li class="back"><div></div></li>
    <li class="left"><div></div></li>
    <li class="right"><div></div></li>
    <li class="top"><div></div></li>
    <li class="bottom"><div></div></li>
  </ul>
</div>
</body>
</html>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台