上一篇中介绍了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. 【Oracle】闪回表

    语法: FLASHBACK TABLE [ schema. ] table [, [ schema. ] table ]... TO { { { SCN | TIMESTAMP } expr| RES ...

  2. C#程序集版本控制文件属性祥解

    using System.Reflection; using System.Runtime.CompilerServices; using System.Runtime.InteropServices ...

  3. Java中RunTime.getRunTime().addShutdownHook用法

    今天在阅读Tomcat源码的时候,catalina这个类中使用了下边的代码,不是很了解,所以google了一下,然后测试下方法,Tomcat中的相关代码如下: Runtime.getRuntime() ...

  4. maven将jar包添加到本地仓库

    mvn install:install-file -Dfile=jar包本地路径 -DgroupId=groupID -DartifactId=ifactId -Dversion=版本 -Dpacka ...

  5. 【剑指Offer】52、正则表达式匹配

      题目描述:   请实现一个函数用来匹配包括'.'和'*'的正则表达式.模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含0次). 在本题中,匹配是指字符串的所有字符匹 ...

  6. 7.5 pragma 指令

    第1个pragma禁用了我们感兴趣的特别警告,第2个恢复了它.禁用尽可能小的一段代码的警告是一个良好的做法,以便你不会错过任何真正应该修复的错误.如果你想在单独一行上禁用或恢复多个警告,那么只需用逗号 ...

  7. router-link-active 与 router-link-exact-active 区别

    我的github:swarz,欢迎给老弟我++星星 router-link-exact-active 是精确匹配规则,即只有当前点击router被匹配 router-link-active 默认是全包 ...

  8. 实验吧writeup

    后台登录 1.看源码有这样一段php代码<!-- $password=$_POST['password']; $sql = "SELECT * FROM admin WHERE use ...

  9. Hexo系列(一) 搭建博客网站

    写在前面的话:本系列文章主要参考 Hexo官方说明文档,同时结合自己在使用过程中的一些心得体会,撷取下来,和大家分享分享.好,下面闲话不多说,马上开始我们的 Hexo 之旅吧 温馨提醒:博主使用的操作 ...

  10. NOIP2017总结与反思

    手动博客搬家: 本文发表于20180213 00:01:05, 原地址https://blog.csdn.net/suncongbo/article/details/79319556 //由于12月生 ...