上一篇中介绍了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. SQL Server2008优化之SET STATISTICS开关

    一.准备工作 缓存对于某个查询的性能影响十分之大,所以优化之前要清空缓存. 清除Buffer Pool时面的所有缓存 DBCC DROPCLEANBUFFERS清除Buffer Pool里的所有缓存的 ...

  2. （List）写一个函数reverseList，该函数能够接受一个List，然后把该List 倒序排列。 例如：  List list = new ArrayList();  list.add(“Hello”);  list.add(“World”);  list.add(“Learn”); //此时list 为Hello World Learn  rever

    import java.util.ArrayList; import java.util.List; public class AA { public static void main(String[ ...

  3. AI: DL方法与问题空间探索

    所谓问题的解决是生存参数空间的一种状态转移到另外一种状态,而目的状态恰好是主体所希望的.完成这种转换的一系列脚本变化过程叫做场景序列,也叫通路.驱动这一些列场景转换的主体参与过程,被称为主动执行.而主 ...

  4. （转）Arcgis for JS之对象捕捉

    http://blog.csdn.net/gisshixisheng/article/details/44098615 在web操作,如绘制或者测量的时候,为了精确,需要捕捉到某一图层的对象,在此,讲 ...

  5. 基于日志实现ssh服务防护脚本

    grep -n "Failed password" secure | sed -nr 's/.*from(.*)port.*/\1/gp' | sort -n |uniq -c|s ...

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

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

  7. Day 19 numpy 模块

    numpy 模块(多维数组) import numpy as np arr=np.array([1,2,3,4],[5,6,7,8]) print(arr) #[[1 2 3 4] #[5 6 7 8 ...

  8. 程序包管理rpm和yum

    Linux程序包管理: API:Application Programming Interface源码包 POSIX:Portable OS 程序源代码 --> 预处理 --> 编译 -- ...

  9. sql语句学习（NOT EXISTS 和 NOT IN ）

    NOT EXISTS SELECT a.*FROM t_user aWHERE a.id_card LIKE '%3203821995100%'AND NOT EXISTS ( SELECT id F ...

  10. 彻底禁用chrome请停用以开发者模式运行的扩展程序弹框

    首先上图 怎么解决呢? 进入安装目录-->下图目录(一串数字的目录) 2. 找到chrome.dll 3.下载patch.exe   下载网址 https://itdocs.pipipan.co ...