如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css

Home

Web Front-end

HTML Tutorial

如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

首先先来看两个用css3实现的炫酷的3d动画效果

你没看错，这个炫酷的效果都是用css3实现的。

下面是动画实现所需要用到的几个css3属性。

1、perspective：用来实现一个3d的场景

写3D效果的第一步是要创建一个3D场景，即索要实现效果的模块。这里用到了 perspective 属性和 perspective-origin 属性。

perspective：用来定义3d动画距离浏览器的距离，单位是（px）。

perspective-origin：效果渲染的视角，告诉浏览器我们观看的角度，一般为 center 或 50% 50%，意为居中。

transform-style：preserve-3d 来告诉浏览器之后要进行的transform的操作都是对一个3D的世界进行的。

2、transition：用来写动画的过度效果

transition 用来实现过度的效果，使动画不至于太过生硬。这是一个复合属性，分别有以下几个属性：

transition-property：过度或动态模拟的css属性，对应的属性有：宽度（width）、高度（height）、边框（border）、绝对定位的上下左右值、外边距（margin）、内边距（padding）、文字阴影（text-shadow）、z-index等。

transition-duration：完成过度所需的时间

transition-timing-function：指定过度函数，函数包括 ease（默认值，速度由快到慢，主见变慢）、linear（匀速）、ease-in（速度越来越快，加速，渐显效果）、ease-out（速度越来越慢，减速，渐隐效果）、ease-in-out（先加速，再减速，渐显渐隐效果）

transition-delay：指定开始出现的延迟时间，即过渡效果开始执行的时间。

3、transform：用来实现翻转、角度的转换

transform 同样是个复合属性，用来实现各种转换效果，分别有以下几个属性：

translate(x,y) 定义 2D 转换。

translate3d(x,y,z) 定义 3D 转换。

translateX/Y/Z 定义转换，分贝用 X、Y、Z 轴的值。

scale(x,y) 定义 2D 缩放转换。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX/Y/Z 通过设置 X、Y、Z 轴的值来定义缩放转换，若为Z轴，则定义的是3D旋转。

rotate(angle) 定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX/Y 定义沿着 X、Y 轴的 2D 倾斜转换。

perspective(n) 为 3D 转换元素定义透视视图

下面介绍下一个简单的骰子的写法

1、创建一个3D场景

这里使用了perspective 和perspective-origin 两个属性，定义了3D动画的距离是800px，居中显示的。这里借用一张慕课网的图片，来查看这两个属性的确切含义。

我们在3D场景里面定义了一个类名为dice的div，这里是我们写这个骰子的外层包裹的div，我们给他定义好宽和高，并让他居中显示。

骰子的六个面我们分别用六个div（其他块级元素也可以）来实现，会用到定位，我们这里给.dice 定义为相对定位。

我们给我们这个骰子的包裹div，加上了transform-style: preserve-3d这个样式，是要告诉浏览器之后要进行的transform的操作都是对一个3D的世界进行的。

<!DOCTYPE html><html><head>    <meta charset="UTF-8" />    <title>实现一个3D骰子</title>    <style>    *{        padding: 0;        margin: 0;            }    .block{        border: 1px solid #000;         padding: 100px 0;        -webkit-perspective: 800px;           -moz-perspective: 800px;                perspective: 800px;        -webkit-perspective-orign: 50% 50%;           -moz-perspective-orign: 50% 50%;                perspective-orign: 50% 50%;    }    .dice{        width: 300px;        height: 300px;        margin: 20px auto;        position: relative;        -webkit-transform-style: preserve-3d;           -moz-transform-style: preserve-3d;                transform-style: preserve-3d;    }    <style></head><body>    <div class="block">        <div class="dice">        </div>    </div></body></html>

2、场景布置好了，下面来写骰子的六个面

html 为6个相同的div

<div class="block">    <div class="dice">        <div class="page" id="page1">1</div>        <div class="page" id="page2">2</div>        <div class="page" id="page3">3</div>        <div class="page" id="page4">4</div>        <div class="page" id="page5">5</div>        <div class="page" id="page6">6</div>    </div></div>

定义公共的样式

.page{    width: 200px;    height: 200px;    background: rgba(0,0,0,0.3);    position: absolute;    font-size: 200px;    color: #fff;    line-height: 200px;    text-align: center;    border: 1px solid red;}

这时我们看到的是一个6个div重叠的块，如下图；

下面是关键的一步，我们来给每个面定义不同的位置，实现一个正方体的结构。

3、给骰子的六个面定义位置

#page2{        -webkit-transform: rotateY(-90deg);           -moz-transform: rotateY(-90deg);            -ms-transform: rotateY(-90deg);             -o-transform: rotateY(-90deg);                transform: rotateY(-90deg);        -webkit-transform-origin: right;           -moz-transform-origin: right;            -ms-transform-origin: right;             -o-transform-origin: right;                transform-origin: right;    }    #page3{        -webkit-transform: translateZ(-200px);           -moz-transform: translateZ(-200px);            -ms-transform: translateZ(-200px);             -o-transform: translateZ(-200px);                transform: translateZ(-200px);        -webkit-transform-origin: right;           -moz-transform-origin: right;            -ms-transform-origin: right;             -o-transform-origin: right;    }    #page4{        -webkit-transform: rotateY(90deg);           -moz-transform: rotateY(90deg);            -ms-transform: rotateY(90deg);             -o-transform: rotateY(90deg);                transform: rotateY(90deg);        -webkit-transform-origin: left;           -moz-transform-origin: left;            -ms-transform-origin: left;             -o-transform-origin: left;    }    #page5{        -webkit-transform: rotateX(-90deg);           -moz-transform: rotateX(-90deg);            -ms-transform: rotateX(-90deg);             -o-transform: rotateX(-90deg);                transform: rotateX(-90deg);        -webkit-transform-origin: top;           -moz-transform-origin: top;            -ms-transform-origin: top;             -o-transform-origin: top;    }    #page6{        -webkit-transform: rotateX(90deg);           -moz-transform: rotateX(90deg);            -ms-transform: rotateX(90deg);             -o-transform: rotateX(90deg);                transform: rotateX(90deg);        -webkit-transform-origin: bottom;           -moz-transform-origin: bottom;            -ms-transform-origin: bottom;             -o-transform-origin: bottom;           }

这里用到了transform的两个属性 rotate 和 origin，前者是定义旋转角度，后者是定义旋转的轴。

按照上述代码来写，我们现在已经可以看见一个正方体了，如图：

现在已经实现了一大部分代码的书写了，我们已经写出了一个静态的正方体，接下来让他实现一个转起来的动画就可以了。

下面是动画的部分，实现让这个正方体以随机的角度转动起来。　

用css3来书写动画

css3里面另一强大的属性就是动画的实现，省去了很多的js代码的计算一级各种动画效果的考虑，拥有css3神器，就可以写出各种炫酷的效果来，赶紧来看看怎么实现。

1、如何旋转

上面我们讲过了他过transform的rotate属性来实现旋转，我们通过对每个面的旋转实现了一个正方体的样子，这里我们把正方体作为一个整体，来实现一整个正方体的旋转。

2、定义动画：

css3 里面写动画分为两步，第一步就是来定义一个动画。通过 @keyframes 来实现。

语法如下：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname：动画的名字（尽量语意化）

keyframes-selector：动画时长的百分比。0%-100%（或from、to）

css-styles：一个或多个合法的 CSS 样式属性

我们这里歹意一个名为 random-rotate 的动画，通过transform的rotate属性来实现旋转。代码如下：

@-webkit-keyframes random-rotate{    0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@-moz-keyframes random-rotate{    0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@-o-keyframes random-rotate{     0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}@keyframes random-rotate{     0%{        -webkit-transform:rotateX(0deg) rotateY(0deg);           -moz-transform:rotateX(0deg) rotateY(0deg);             -o-transform:rotateX(0deg) rotateY(0deg);                transform:rotateX(0deg) rotateY(0deg);    }    100%{        -webkit-transform:rotateX(360deg) rotateY(360deg);           -moz-transform:rotateX(360deg) rotateY(360deg);             -o-transform:rotateX(360deg) rotateY(360deg);                transform:rotateX(360deg) rotateY(360deg);    }}

这里我们要这个动画x、y轴分别从0度转到 360度。

3、动画的实现

css3 里面的animation 配合 @keyframe 来实现。 animation 是一个复合属性，同样我们来看下这个复合属性的各个属性是如何定义的。

animation-name：动画的名字（@keyframe 定义好的）

animation-duration：动画执行一次的时间

animation-timing-function：动画的速度曲线（ease、linear等，等同于transform的速度曲线用法）

animation-delay：动画的延时时间

animation-interation-count：动画播放的次数（数字/infinite 无限次）

animation-direction：动画播放的方向（normal 正常/alternate 反向）

animation-play-state：动画播放状态（running 播放/paused 暂停）

animation-fill-mode：动画在开始和结束后发生的操作

下面来写下代码，我们这里让这个正方体无限转动，每次动画的时间为5s，速度为匀速，动画不延时。同时我们给动画添加一个过度的效果，使动画看起来更平滑。

外层div样式改为如下：

.dice{    width: 300px;    height: 300px;    margin: 20px auto;    position: relative;    -webkit-transform-style: preserve-3d;       -moz-transform-style: preserve-3d;                transform-style: preserve-3d;    -webkit-animation: random-rotate 5s linear 0s infinite;       -moz-animation: random-rotate 5s linear 0s infinite;        -ms-animation: random-rotate 5s linear 0s infinite;         -o-animation: random-rotate 5s linear 0s infinite;              animation: random-rotate 5s linear 0s infinite;    -webkit-transition: all 1s ease;       -moz-transition: all 1s ease;        -ms-transition: all 1s ease;         -o-transition: all 1s ease;            transition: all 1s ease;}

至此，我们已经完整的实现了一个正方体（类似于一个骰子）的旋转，有几点需要注意的提示如下：

1、由于个浏览器对css3的实现不同，记得加浏览器前缀名

2、css3动画确实很炫，但还是要根据项目的不同来进行取舍

3、css3可以实现的动画还很多，大家可以多开开脑洞，来实现属于你的css3动画

4、每个动画有自己的用途，使用时不要混淆

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Where to find the Crane Control Keycard in Atomfall

3 weeks agoByDDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months agoByDDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks agoByDDD

Hot Tools

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),