上一篇中介绍了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. js-学习方法

    1:多实践,找例子,看别人是如何实现的,然后自己去实现,然后谷歌百度,最后总结. 2:如何读js英文书:不是自己不会读,是被吓着了.自己吓自己. 英文不好的话,先不要挨着排的从头到尾读. 应该首先读目 ...

  2. C# tostring("0000000")

    public string ConverNo(string str) { string result = ""; ]; ; i < chars.Length; i++) ch ...

  3. jdk?jre?

    很多人都搞不懂什么是jdk,什么是jre,只知道电脑安装了这两个就能开发和运行java程序,这里我简单讲讲什么是jdk,什么是jre. jdk,即Java Development Kit,故名思意就是 ...

  4. 通过yum仓库安装mysql

    1,下载安装包wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm2,安装mysql源yum -y ins ...

  5. eas之编辑表单元格

    --指定表列行单元不可编辑 // 锁定表格.行.列.单元 table.getStyleAttributes().getProtection().setLocked(true); row.getStyl ...

  6. 【剑指Offer】35、数组中的逆序对

      题目描述:   在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数P.并将P对1000000007取模的结果输出. 即输出P ...

  7. 分治FFT模板

    题目链接:https://www.luogu.org/problemnew/show/P4721 总结了一下蒟蒻FFT/NTT容易写错的地方: ​ 1.rev数组求错. ​ 2.cdq注意顺序:先递归 ...

  8. swift-计算字符串长度

    text.characters.count(记得text一定要是String类型)

  9. IE下自定义错误页面不显示的原因

    如果一个 404 页面的内容小于 512B,IE 会认为该 404 页面不够友好,在 IE 下将不会成功返回该 404 错误页面

  10. 批量重命名B站下载文件

    将B站下载的文件统一修改文件名 事情来由 事情是这样的,我在B站上发现一个教程,看了一下,非常不错,于是想下载下来(免得B站和谐). 问题就是这样来了,我手机没多少内存,下载后下发现文件在手机中都是以 ...