-
- 慕虎3123777 2021-03-04
还没看视频，自己写了下。
<!DOCTYPE html>
<html>
<head>
<title>动画</title>
<style>
#ex{
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style: -webkit-preserve-3d;
}
.block{
display: flex;
width: 100vw;
height: 100vh;
margin: 0 auto;
position: relative
}
.kuai{
width: 200px;
height: 200px;
background-color: #000;
text-align: center;
line-height: 200px;
color:#fff;
font-size: 80px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -200px;
transition: -webkit-transform 1.5s;
}
#font2, #font3, #font4, #font5, #font6{
-webkit-transform-origin: center bottom;
-webkit-transform: rotateX(90deg);
}
</style>
</head>
<body>
<div id="ex">
<div class="block">
<div id="font6" class="kuai">6</div>
<div id="font5" class="kuai">5</div>
<div id="font4" class="kuai">4</div>
<div id="font3" class="kuai">3</div>
<div id="font2" class="kuai">2</div>
<div id="font1" class="kuai">1</div>
<button id="pre">pre</button>
<button id="last">last</button>
</div>
</div>
<script>
let pre = document.getElementById("pre");
let last = document.getElementById("last");
let flag = 1
pre.onclick = function () {
if (flag == 6) {
return;
}
let nextflag = flag + 1
let current = document.getElementById("font" + flag);
let next = document.getElementById("font" + nextflag);
current.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(-90deg);"
next.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(0deg);"
flag = flag + 1
}
last.onclick = function () {
if (flag == 1) {
return;
}
let nextflag = flag - 1
let current = document.getElementById("font" + flag);
let next = document.getElementById("font" + nextflag);
current.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(90deg);"
next.style = "-webkit-transform-origin: center bottom; -webkit-transform: rotateX(0deg);"
flag = flag - 1
}
</script>
</body>
</html>
- 0赞 · 0采集
-
- 论斤烤 2020-11-23
3D动画原理
-
截图0赞 · 0采集
-
- pinzaghi 2019-11-22
一张竖立，其他图片平躺
-
截图0赞 · 0采集
-
- 慕粉2244244512 2017-06-13
- 3D效果
-
截图0赞 · 0采集
-
- Vegetable_Bird菜鸟 2017-04-13
- sasa
-
截图0赞 · 0采集
-
- 精慕门3383071 2017-04-06
- 翻转效果的原理
-
截图0赞 · 0采集
-
- 布拿拿 2017-04-02
- transfrom-origin:bottom://旋转的时候沿着X轴底部
-
截图0赞 · 0采集
-
- 布拿拿 2017-04-02
- transfrom-style:preserve-3d;//用来告诉浏览器在这个id里子元素将采取3维操作
-
截图0赞 · 1采集
-
- 布拿拿 2016-12-18
- 点击next响应next()函数 点击previous响应previous()函数
-
截图0赞 · 0采集
-
- _莫忘初衷_ 2016-11-03
- 因为transform-style属性是设置子元素是否呈现3D效果，实际发生旋转的是page,page在pagegroup里面，所以要设置在pagegroup中啦
-
截图0赞 · 0采集
-
- 悲秋娱 2016-06-06
- 动画效果：transition:<过渡属性名> <过渡时间>。<br> 创建3D场景：perspective和perspective-origin<br> perspective:物体离屏幕的距离<br> perspective-origin:视点（往哪个点看）<br> transform属性：<br> translate:平移；rolate：旋转 -webkit-transform-style:preserve-3d:向页面告知是3D效果
- 0赞 · 0采集
-
- gaoxinmiao 2016-04-22
- html
-
截图0赞 · 0采集
-
- 慕桂英9800889 2016-03-20
- 翻页效果分析图：
-
截图0赞 · 0采集
-
- 江城fen 2016-03-13
- 3D动画
-
截图0赞 · 0采集
-
- Amy1234567 2016-02-19
- 3d的创建 在wrap层 -webkit-perspective:800; -webkit-perspective-origin:50% 50%; 在子层 -webkit-transform-style:preserve-3d;
- 0赞 · 0采集
-
- YUI唯 2015-09-27
- 原理图
-
截图0赞 · 2采集
-
- baymax_1 2015-09-12
- 动画变化细节
-
截图0赞 · 1采集
-
- qq_疯子_9 2015-08-23
- css
-
截图0赞 · 0采集
-
- qq_疯子_9 2015-08-23
- css
-
截图0赞 · 0采集
-
- qq_疯子_9 2015-08-23
- html部分
-
截图0赞 · 0采集
-
- aimike 2015-07-18
- good
- 0赞 · 0采集
-
- 墨西哥鸡味卷 2015-07-15
- #my3dspace{ -webkit-perspective:800; -webkit-perspective-origin: 50% 50%; overflow:hidden; } #pagegroup{ width:400px; height:400px; margin:0 auto; -webkit-transform-style:preserve-3d;
- 0赞 · 0采集
-
- Carol_Li 2015-06-21
- 沿着x轴底部为旋转轴的话，要设置-webkit-transform-origin:bottom; 要显示出翻页效果的话，要给每一个page设置-webkit-transition:-webkit-transform 1s linear; 因为一开始除了page1以外其他的page都要横向躺着，所以要对他们进行x轴的90度rotate:-webkit-transform:rotate(90deg); 因为，之后要用js对每一个page进行不同的操作，所以不能把-webkit-transform-origin:bottom;和-webkit-transition:-webkit-transform 1s linear;写在page class里面，而是分别写在每个＃pageIndex里。
- 0赞 · 0采集
-
- Carol_Li 2015-06-21
- 因为＃pagegroup内的其他五个模块要重叠在一起，所以要把他们的父元素＃pagegroup设成relative，page class设置成absolute。如果不设置父元素relative的话，那么，那几个模块就会以浏览器窗口作为定位基准，会跑到浏览器的左上方。
- 0赞 · 0采集
-
- Carol_Li 2015-06-21
- 为了3D窗口不会影响其他部分（什么部分？）的显示，要加上这一语句overflow:hidden; overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。 hidden：内容会被修剪，并且其余内容是不可见的。
- 0赞 · 0采集
-
- Carol_Li 2015-06-21
- 点击链接响应js函数的操作方法：<a href="javascript: 函数名()"> 例如：javascript:void(0)
-
截图0赞 · 0采集
-
- Carol_Li 2015-06-20
- 2是指与1页面（竖着的）后面平躺在地上的除了1页面外的其他页面，其他页面是存在的，只不过躺着看不到。 每次翻页有两个操作，前面页面翻转下去，后面页面翻转上来。 （这个动画效果可以做电子时钟用。）
-
截图0赞 · 0采集
-
- 烟云怀僧 2015-06-04
- 这图做的太逼真了
-
截图0赞 · 0采集
-
- 筱雅吖 2015-04-25
- 防止影响其他设置：overflow：hidden;(位置) 重叠页面：position：relatve;position:absolute;（各自的位置） page1:初始状态不一样。 要设置旋转中心：沿着x轴底部开始：-webkit-transform-origin:bottom; 页面23456起始位置已沿着x轴向后旋转90度：-webkit-trasfrom:rotateX(90deg); 注意点：transition和transform各自的作用，不能混淆。
-
截图0赞 · 7采集
-
- 筱雅吖 2015-04-25
- 翻页效果分析图：
-
截图0赞 · 0采集
