How to achieve three-dimensional effect in html5

html5 Method to achieve three-dimensional effect: 1. Create an HTML sample file; 2. Pass ".img {width: 50px; height: 50px; margin: 0 auto; transform-style: preserve-3d;} " attribute to achieve a three-dimensional effect; 3. Use the "@-webkit-keyframes rotate {...}" attribute to achieve the animation effect.

The operating environment of this tutorial: Windows 10 system, HTML5&&CSS3 version, DELL G3 computer

How to achieve three-dimensional effects in html5?

HTML5 Special Effects~3D Cube Rotation

Let’s first appreciate the final effect of this special effect

#

该特效是基于Css3的一些新特性拼接而成.主要用到了hover,transform和@keyframe属性.下面简述一下这三个属性的作用.

hover

效果:当鼠标移到元素上时会展现你定义的hover的样式

使用方法:假定我们有一个类,名为mystyle.修改它的css样式的方式是.mystyle{}.修改它的css hover样式的方式是.mystyle:hover{}.

transform

效果:对元素进行旋转、缩放、移动或倾斜

使用方法:传入旋转rotate(angle),缩放scale(x,y),移动translate(x,y),倾斜skew(angle)的参数进行属性的修改

@keyframe

效果:实现动画效果

使用方法:@keyframe 后 动画名{from:初始状态;to:末状态}

代码解析

接下来是特效实现的完整代码

推荐学习：《HTML5视频教程》

The above is the detailed content of How to achieve three-dimensional effect in html5. For more information, please follow other related articles on the PHP Chinese website!