上一篇中介绍了animate的基本的属性，这一篇讲的则是关于animate以及transforms的使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3超炫3维转换</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.box li{
list-style: none;
}
.out{
width: 800px;
height: 400px;
margin: 100px auto;
position: relative;
/*perspective: 1000px;*/
}
.box{
width: 800px;
height: 100px;
transform-style: preserve-3d;
position: absolute;
transform-origin: center center 25px;
transition: 2s all ease-in-out;
}
.box li{
position: absolute;
}
ul li:nth-of-type(1){
width: 800px;
height: 50px;
top: -50px;
background-color: #eaeaea;
-webkit-transform-origin: bottom;
-webkit-transform: rotateX(-90deg);
}
ul li:nth-of-type(2){
height:100px;
width: 50px;
left: -50px;
background-color: #eaeaea;
-webkit-transform-origin: right;
-webkit-transform: rotateY(90deg);
}
ul li:nth-of-type(3){
height: 100px;
width: 800px;
-webkit-transform-origin: center;
-webkit-transform: rotateY(180deg);
background: url(3D2.jpg)no-repeat;

}
ul li:nth-of-type(4){
height: 100px;
width: 50px;
left: 800px;
background-color: #eaeaea;
-webkit-transform-origin: left;
-webkit-transform: rotateY(-90deg);
}
ul li:nth-of-type(5){
width: 100px;
height: 50px;
top:100px;
background-color: #eaeaea;
-webkit-transform-origin: top;
-webkit-transform: rotateX(90deg);
}
ul li:nth-of-type(6){
height: 100px;
width: 800px;
background:url(3D3.jpeg)no-repeat;
}
#btn{
width: 100px;
background-color: black;
border-radius: 5px;
margin: 0 auto;
color:white;
font: 20px/40px"微软雅黑";
text-align: center;
cursor: pointer;
}
</style>
<script src="css3.js"></script>
<script>
/*
实现目标效果： 1.将图片分成四部分，则每部分的高度为100px，添加进out中
2.添加鼠标事件
*/
window.onload = function (){
var out = document.getElementById('out');
add(out);
var btn = document.getElementById('btn');
var box =document.getElementsByTagName('ul');
var angle = 0;
btn.onclick=function (){
angle+=180;
if(angle>180)angle=0;
for(var j = 0;j<4;j++){
setCss3(box[j],{transform:"rotateY("+angle+"deg)"});
}
}
}
//添加box的函数
function add(obj){
// 创建一个数组，然后通过for添加一个四个ul对象；
var str = '';
for(var i=0;i<4;i++){
str+='<ul class="box" style="top:'+i*100+'px;transition-delay:'+i/4+'s"><li></li><li></li><li style="background-position:0px '+-i*100+'px;"></li><li></li><li></li><li style="background-position:0px '+-i*100+'px;"></li></ul>';
}
//将str数组添加在obj中
obj.innerHTML=str;
}
</script>
</head>
<body>
<!-- 实现图片的分割3D旋转效果

实现的效果：1.点击按钮的时候，图片翻转，并且是分割式旋转180度。

实现的步骤： 1.布局，布局3D盒子，并将图片放置在盒子的正面和反面，设置好盒子的样式。
2.将不知的布置的盒子样式保留，去掉body中的标签。
3.通过javascript添加四个盒子，每个盒子中背景图片都是同一张图片，并通过设置背景图片的position来控制每个盒子显示出不同的位置。
4.鼠标点击事件，每次翻转角度为180度。通过改变过渡模式来使图片实现分割式旋转
-->
<div class="out" id="out">

</div>
<div id="btn">更换</div>
</body>
</html>

可以直接复制使用

css3 animate写的超炫3D转换的更多相关文章

  1. 一款纯css3实现的超炫3D表单

    今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览   源码下载 实现的代码. html代码 ...

  2. 优秀教程：使用 CSS3 动画实现的超炫的过渡特效

    Codrops 最近分享了一些很酷的图片切换灵感.有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片.状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为. ...

  3. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  4. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  5. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  6. CSS3 基本属性 浅析（含选择器、背景阴影、3D转换、动画等）

    1渐进增强原则 2私有前缀  不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试:     Chrome浏览器:-webkit-border-radius: 5px;   ...

  7. Cool！15个超炫的 CSS3 文本特效【上篇】

    每一个网页设计师都希望创建出让用户能够赏识的网站.当然,这是不可能满足每个人的口味的.幸运的是,我们有最强大的工具和资源.实际上,我们非常多的网站模板,框架,内容管理系统,先进的工具和其他的资源可以使 ...

  8. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  9. TensorSpace：超酷炫3D神经网络可视化框架

    TensorSpace:超酷炫3D神经网络可视化框架 TensorSpace - 一款 3D 模型可视化框架,支持多种模型,帮助你可视化层间输出,更直观地展示模型的输入输出,帮助理解模型结构和输出方法 ...

随机推荐

  1. href标签中target的几个属性值

    没有指定<a>的target属性值时,默认是"_blank,可以参考以下代码的设置来控制<a href="#" target="_blank& ...

  2. php数据库分页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 解决Fiddler抓包上不了网的问题：

    以前安装Fiddler 没有配置过相关设置,经常出现就是打开fiddler后,浏览器就无法上网了,刚开始觉得可能是因为而公司上网是需要自己的代理的,但fiddler打开后默认127.0.0.1作为IE ...

  4. Apex语言（三）原始数据类型

    1.原始数据类型(Primitive) 整数:Integer 双精度:Double 单精度:Decimal 长整型:Long 日期:Date 日期时间:Datetime 字符串:String ID:I ...

  5. spring学习地址

    http://developer.51cto.com/art/201006/205212_2.htm

  6. 【udacity】机器学习-支持向量机

    Evernote Export 支持向量机(Support Vector Machine) 不适定问题不止一个决策边界 要找一个决策边界,不仅能将训练集很好的划分,而且提升模型的泛化能力 支持向量机直 ...

  7. uwsgi部署django，里的request调用的接口响应慢解决方法

    解决方法,增加2个线程 uwsgi.ini 配置如下 chdir=/var/www/Ultramanpidfile=/tmp/uwsgi.pidmodule=Ultraman.wsgimaster=t ...

  8. 转载：Java中的Checked Exception——美丽世界中潜藏的恶魔？

    转自 Amber-Garden 的 博客 https://www.cnblogs.com/loveis715/p/4596551.html 在使用Java编写应用的时候,我们常常需要通过第三方类库来帮 ...

  9. SpringBoot背景

    1.SpringBoot的产生背景:随着spring日益发展,丰富的框架和组件大大简化了java项目开发过程,经过多年的实践,得到了很多人的认可,但是Spring的严重依赖XML配置文件,严重导致项目 ...

  10. poj 3177&&3352 求边双联通分量，先求桥，然后求分量（ 临界表代码）

    /*这道题是没有重边的,求加几条边构成双联通,求边联通分量,先求出桥然后缩点,成一个棵树 找叶子节点的个数*/ #include<stdio.h>//用容器写在3177这个题上会超内存,但 ...