上一篇中介绍了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. CorelDRAW中内置的视频教程在哪里？

    CorelDRAW中内置了很多教学内容和视频教程,可以帮助用户快速学习和掌握CorelDRAW的使用方法,创作出个性化的作品.很多小伙伴表示找不到软件自带学习视频,现在小编就来告诉你. 用户可以通过两 ...

  2. Tomcat的几种部署方式

    1.  直接把项目的根目录放在: apache-tomcat-*.*\webapps\ROOT 这样即可以通过http://127.0.0.1:8080 来访问 2.  把项目根目录放在: apach ...

  3. freemarker使用map替换字符串中的值

    package demo01; import java.io.IOException;import java.io.OutputStreamWriter;import java.io.StringRe ...

  4. PAT_A1155#Heap Paths

    Source: PAT A1155 Heap Paths (30 分) Description: In computer science, a heap is a specialized tree-b ...

  5. 【JavaScript】不使用正则表达式和字符串的方式来解析浏览器的URl地址信息

    1.比如我们要获取的网站URl地址是:https://music.163.com/#/playlist?id=2384581760 一般我们能够想到的方式是直接使用正则表达式获取使用字符串直接解析的方 ...

  6. 表操作(day03)

    回顾: 1.单行函数 2.表连接 oracle中的表连接 内连接 等值连接 select e.id,e.first_name,d.name from s_emp e,s_dept d where e. ...

  7. centos7系统修改内核

    修改centos6的内核启动顺序,只需要修改/etc/grub.conf 里的default项配置即可.那么centos7系统该如何修改呢? 下面就centos7系统修改内核,做如下记录: 一般在编译 ...

  8. 【codeforces 350C】Bombs

    [链接] 我是链接,点我呀:) [题意] [题解] 会发现在x轴以及y轴上的炸弹,能用较少的操作数除掉. 而其他的点,会发现操作数都是一样的. 那么先把x,y轴上的点都除掉. 其他点. 我们优先沿着横 ...

  9. Game with a Strip

    Game with a Strip Time limit: 2.0 secondMemory limit: 64 MB There is a strip 1 × n with two sides. E ...

  10. Windows 2003 IIS 不支持ASP的问题

    Windows 2003 IIS 不支持ASP的问题 问题: HTTP 错误 404 - 文件或目录未找到. Internet 信息服务 (IIS) 第一步,启用Asp,进入:控制面板 -> 管 ...