注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

CSS3 3D transform  

2014-09-21 16:29:13|  分类: CSS3属性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
注意:请在谷歌浏览器下预览
独行冰海
梦幻雪冰
独行冰海
梦幻雪冰
独行冰海
梦幻雪冰
原理:在这边就不做详细解释了(自行研究)
欢迎学习交流----梦幻雪冰
源代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css" type="text/css">
<style>
body {
/*视角*/
-webkit-perspective: 4000;
}
.wrap {
position: relative;
width: 200px;
height: 200px;
margin: 200px auto;
/*声明3D样式*/
-webkit-transform-style: preserve-3d;
-webkit-animation: runchange 6s ease infinite alternate;
}
/*运动*/
@-webkit-keyframes "runchange" {
from {
-webkit-transform: rotateY(0deg) rotateX(0deg);
}
to {
-webkit-transform: rotateY(360deg) rotateX(45deg);
}
}
/*字体大小*/
@-webkit-keyframes "colorchange" {
0% {
text-shadow:
-1px -1px #444,
-2px -2px #444,
1px 1px #fff,
2px 2px #fff;
font-size: 14px;
}
60% {
text-shadow:
-1px -1px #444,
-2px -2px #444,
1px 1px #fff,
2px 2px #fff;
font-size: 20px;
}
100% {
text-shadow:
-1px -1px #444,
-2px -2px #444,
1px 1px #fff,
2px 2px #fff;
font-size: 30px;
}
}
.wrap div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border: 5px solid #999;
background: #13b27b;
line-height: 200px;
text-align: center;
-webkit-animation: colorchange 6s ease infinite alternate;
}
/*左边*/
.wrap div:nth-child(1) {
background: #e5dab7;
-webkit-transform: rotateY(-90deg) translateZ(105px);
}
/*右边*/
.wrap div:nth-child(2) {
background: #f8aa96;
-webkit-transform: rotateY(90deg) translateZ(105px);
}
/*上边*/
.wrap div:nth-child(3) {
background: #f05a67;
-webkit-transform: rotateX(90deg) translateZ(105px);
}
/*下边*/
.wrap div:nth-child(4) {
background: #00afad;
-webkit-transform: rotateX(-90deg) translateZ(105px);
}
/*前边*/
.wrap div:nth-child(5) {
background: #4cc6e0;
-webkit-transform: translateZ(105px);
}
/*后边*/
.wrap div:nth-child(6) {
background: #a0c586;
-webkit-transform: rotateY(180deg) translateZ(105px);
}
</style>
</head>
<body>
<div class="wrap">
<div>独行冰海</div>
<div>梦幻雪冰</div>
<div>独行冰海</div>
<div>梦幻雪冰</div>
<div>独行冰海</div>
<div>梦幻雪冰</div>
</div>
</body>
<script type="text/javascript"></script>
</html>

欢迎学习交流----梦幻雪冰

  评论这张
 
阅读(93)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017