纯CSS炫酷的3D旋转
2018-06-24 02:14:49来源:未知 阅读 ()
<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>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:笔记 — 动画效果(Css3)
下一篇:font使用
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash