关键字：    
当前位置： >
纯css3实现骰子3D翻转特效
详细介绍 - [ 纯css3实现骰子3D翻转特效 ]
纯css3实现骰子3D翻转特效是一款自动翻转的3d色子动画效果下载。
下载地址 - [ 纯css3实现骰子3D翻转特效 ]
推荐使用、下载，请使用解压文件；
下载本站资源，如服务器暂不能下载请过一段时间再试；
本站资源通过 、 等软件检测；
本站部分资源供学习交流使用，如商业用途，请购正版。
网友对“纯css3实现骰子3D翻转特效”的评论
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
& 下一篇：
您喜欢这个源码么？
本类热门源码
增值电信业务经营许可证:苏B2-CopyRight ©
All Rights reserved.前面两个课程中我们分别制作了和，掌握了它们的制作方法说明你已经会使用 3D transforms了。下面我们接着来谈谈更为高级的内容-3D旋转木马。当谈到3D旋转木马，开发者可以有许多种方式来实现它，但既然浏览器有实现3D空间的能力，我们为何不试一试使用CSS来实现一个旋转的3D旋转木马效果呢？
3D旋转木马的HTML结构和立方体、长方体和卡片的HTML结构基本类似，只是面多了一些。我们这里使用9个面来制作旋转木马：
&section class="container"&
&div id="carousel"&
&figure&1&/figure&
&figure&2&/figure&
&figure&3&/figure&
&figure&4&/figure&
&figure&5&/figure&
&figure&6&/figure&
&figure&7&/figure&
&figure&8&/figure&
&figure&9&/figure&
&/section&
现在来制作基本样式。我们给#carousel中的每一个面设置一个20像素的间隙，可以通过left:10px和top:10px来实现它。这样，每一个main的有效宽度为210像素：
.container {
width: 210
height: 140
perspective: 1000
#carousel {
width: 100%;
height: 100%;
transform-style: preserve-3d;
#carousel figure {
width: 186
height: 116
接下来，我们要旋转每一个面。#carousel中有9个面，如果整个旋转木马的面是平均分布的，那么每个面需要在上一个面的基础上多旋转40度（360 / 9）。
#carousel figure:nth-child(1) { transform: rotateY(
#carousel figure:nth-child(2) { transform: rotateY(
40deg ); }
#carousel figure:nth-child(3) { transform: rotateY(
80deg ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ); }
在接下来的事情就是移动中心点。当我们在制作立方体和长方体的时候，translate的值很容易计算出来，基本上是等于长度和宽度或者高度的一半。对于旋转木马，我们没有尺寸可以参考，我们需要计算出每一个面的移动距离。
我们可以在纸上画一个旋转木马的草图，可以看到，我们只知道两样东西：每一个面的宽度是210像素，每一个面要在上一个面的基础上多旋转40度。从俯视图往下看，它们有9个三角形组成。如果我们在其中一个三角形上沿中心垂线将它切开，可以得到一个直角三角形。
我们可以用一个基本的切线方程确定在该图中R的长度。
经过上面的计算我们可以得出结果：每一个面需要在3D空间中向外translate288像素。
#carousel figure:nth-child(1) { transform: rotateY(
0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(
40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(
80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }
如果你改变了面的宽度或者数量，需要重新按照公式来计算translate的值。另一方面来说，我们只需要知道这两个值，就可以随意改变旋转木马的面的宽度和数量，可以使用js来动态计算它们：
var tz = Math.round( ( panelSize / 2 ) /
Math.tan( ( ( Math.PI * 2 ) / numberOfPanels ) / 2 ) );
// or simplified to
var tz = Math.round( ( panelSize / 2 ) /
Math.tan( Math.PI / numberOfPanels ) );
和3D立方体和长方体一样，要显示其他的面，只需要改变transform的顺序即可：
transform: translateZ( -288px ) rotateY( -160deg );
学习到这里你可能觉得：
反复重写每一个面的transform样式是很无聊的事情。
制作旋转木马还要使用到高等数学的知识！ -_-!!
每错，我们可以将单调重复的transform样式交给脚本来完成，如果你的代码编写正确，将会比硬编码的版本更加灵活。
CSS3 3D transforms系列教程：
本文版权属于jQuery之家，转载请注明出处：当前位置： >
一款利用html5和css3实现的3D滚动特效的教程
时间： 11:01 来源： 作者： 浏览：
怎么利用css3和html5制作圆形很正方形的3D滚动特效，今天给大家带来一款html5和css3实现的3D滚动特效。代码很全，不会的朋友可以可以进来学习一下，需要的朋友可以参考下
怎么利用css3和html5制作圆形很正方形的3D滚动特效，今天给大家带来一款html5和css3实现的3D滚动特效。代码很全，不会的朋友可以可以进来学习一下，需要的朋友可以参考下
　　今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下：
　　实现的代码。
　　html代码：
XML/HTML Code复制内容到剪贴板
&class=&container&&&
&&&&&&&&&class=&cube&&&
&&&&&&&&&&&&&class=&side&side1&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side2&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side3&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side4&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side5&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side6&&&
&&&&&&&&&&&&&&
&&&&&&&&&&
&&&&&class=&container&container2&&&
&&&&&&&&&class=&cube&&&
&&&&&&&&&&&&&class=&side&side1&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side2&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side3&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side4&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side5&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&class=&side&side6&&&
&&&&&&&&&&&&&&
&&&&&&&&&&
　　css3代码：
CSS Code复制内容到剪贴板
&&height:100 &&
.container{ &&
&&position:absolute; &&
&&height:100px; &&
&&width:100px; &&
&&left:33%; &&
&&top:50%; &&
&&-webkit-transform:&translateX(-50%)&translateY(-50%); &&
&&&&&&&&&&transform:&translateX(-50%)&translateY(-50%); &&
&&-webkit-perspective:400px; &&
&&&&&&&&&&perspective:400px; &&
&&height:100px; &&
&&widht:100px; &&
&&-webkit-transform-origin:50%&50%; &&
&&&&&&&&&&transform-origin:50%&50%; &&
&&-webkit-transform-style:preserve-3d; &&
&&&&&&&&&&transform-style:preserve-3d; &&
&&-webkit-animation:rotate&4s&infinite&ease-in- &&
&&&&&&&&&&animation:rotate&4s&infinite&ease-in- &&
&&position:absolute; &&
&&display:block; &&
&&height:100px; &&
&&width:100px; &&
.side1{ &&
&&background:#41C3AC; &&
&&-webkit-transform:translateZ(100px); &&
&&&&&&&&&&transform:translateZ(100px); &&
.side2{ &&
&&background:#FF884D; &&
&&-webkit-transform:rotateY(90deg)&translateZ(100px); &&
&&&&&&&&&&transform:rotateY(90deg)&translateZ(100px); &&
.side3{ &&
&&background:#32526E; &&
&&-webkit-transform:rotateY(180deg)&translateZ(100px); &&
&&&&&&&&&&transform:rotateY(180deg)&translateZ(100px); &&
.side4{ &&
&&background:#65A2C5; &&
&&-webkit-transform:rotateY(-90deg)&translateZ(100px); &&
&&&&&&&&&&transform:rotateY(-90deg)&translateZ(100px); &&
.side5{ &&
&&background:#FFCC5C; &&
&&-webkit-transform:rotateX(90deg)&translateZ(100px); &&
&&&&&&&&&&transform:rotateX(90deg)&translateZ(100px); &&
.side6{ &&
&&background:#FF6B57; &&
&&-webkit-transform:rotateX(-90deg)&translateZ(100px); &&
&&&&&&&&&&transform:rotateX(-90deg)&translateZ(100px); &&
@-webkit-keyframes&rotate{ &&
&&&&-webkit-transform:rotateX(0deg)&rotateY(0deg)&rotateZ(0deg); &&
&&33.33%{ &&
&&&&&-webkit-transform:rotateX(360deg)&rotateY(0deg)&&rotateZ(0deg);&&&& &&
&&66.66%{ &&
&&&&&-webkit-transform:rotateX(360deg)&rotateY(360deg)&&rotateZ(0deg); &&
&&100%{ &&
&&&&&-webkit-transform:rotateX(360deg)&rotateY(360deg)&&rotateZ(360deg); &&
@keyframes&rotate{ &&
&&&&transform:rotateX(0deg)&rotateY(0deg); &&
&&&&transform:rotateX(360deg)&rotateY(0deg);&&&& &&
&&100%{ &&
&&&&transform:rotateX(360deg)&rotateY(360deg); &&
&&font-family:helvetica; &&
&&color:#428bca; &&
&&text-align:center; &&
&&display:block; &&
.container2{ &&
&&left:66%; &&
.container2&.side{ &&
&&border-radius:50%; &&html5和css3实现的3D滚动特效 - 推酷
html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下：
实现的代码。
html代码：
&div class=&container&&
&div class=&cube&&
&div class=&side side1&&
&div class=&side side2&&
&div class=&side side3&&
&div class=&side side4&&
&div class=&side side5&&
&div class=&side side6&&
&div class=&container container2&&
&div class=&cube&&
&div class=&side side1&&
&div class=&side side2&&
&div class=&side side3&&
&div class=&side side4&&
&div class=&side side5&&
&div class=&side side6&&
& & &/div&
css3代码：
height:100
.container{
height:100
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-perspective:400
perspective:400
height:100
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-animation:rotate 4s infinite ease-in-
animation:rotate 4s infinite ease-in-
height:100
background:#41C3AC;
-webkit-transform:translateZ(100px);
transform:translateZ(100px);
background:#FF884D;
-webkit-transform:rotateY(90deg) translateZ(100px);
transform:rotateY(90deg) translateZ(100px);
background:#32526E;
-webkit-transform:rotateY(180deg) translateZ(100px);
transform:rotateY(180deg) translateZ(100px);
background:#65A2C5;
-webkit-transform:rotateY(-90deg) translateZ(100px);
transform:rotateY(-90deg) translateZ(100px);
background:#FFCC5C;
-webkit-transform:rotateX(90deg) translateZ(100px);
transform:rotateX(90deg) translateZ(100px);
background:#FF6B57;
-webkit-transform:rotateX(-90deg) translateZ(100px);
transform:rotateX(-90deg) translateZ(100px);
@-webkit-keyframes rotate{
-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-webkit-transform:rotateX(360deg) rotateY(0deg)&&rotateZ(0deg);& &
-webkit-transform:rotateX(360deg) rotateY(360deg)&&rotateZ(0deg);
-webkit-transform:rotateX(360deg) rotateY(360deg)&&rotateZ(360deg);
@keyframes rotate{
transform:rotateX(0deg) rotateY(0deg);
transform:rotateX(360deg) rotateY(0deg);& &
transform:rotateX(360deg) rotateY(360deg);
font-family:
color:#428
text-align:
.container2{
.container2 .side{
border-radius:50%;
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}