如何制作css3的3d动画--以骰子旋转为例,详解css3动画属性_html/css_WEB-ITnose
首先先来看两个用css3实现的炫酷的3d动画效果
1
2
3
4
5
6
你没看错,这个炫酷的效果都是用css3实现的。
下面是动画实现所需要用到的几个css3属性。
1、perspective:用来实现一个3d的场景
写3D效果的第一步是要创建一个3D场景,即索要实现效果的模块。这里用到了 perspective 属性和 perspective-origin 属性。
2、transition:用来写动画的过度效果
transition 用来实现过度的效果,使动画不至于太过生硬。这是一个复合属性,分别有以下几个属性:
3、transform:用来实现翻转、角度的转换
transform 同样是个复合属性,用来实现各种转换效果,分别有以下几个属性:
下面介绍下一个简单的骰子的写法
1、创建一个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;}}
我们这里歹意一个名为 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 是一个复合属性,同样我们来看下这个复合属性的各个属性是如何定义的。
下面来写下代码,我们这里让这个正方体无限转动,每次动画的时间为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;}
至此,我们已经完整的实现了一个正方体(类似于一个骰子)的旋转,有几点需要注意的提示如下:

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

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

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

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
