<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>
如对本文有疑问， 点击进行留言回复！！
深入理解CSS background-blend-mode的作用机制
我要评论
网友评论