效果图

知识点：

perspective 透视效果
transform-style：preserve-3d 3D呈现效果（添加在父类）
animation：name time infinite(动画无限循环播放)
transform：rotate translate

通过个给

HTML代码

<div class="abc"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

CSS代码

<style>body {/* 透视加在爷爷级 */perspective: 800px;}.abc {/* 3D呈现加在爸爸级 */transform-style:preserve-3d;position: relative;width: 200px;height: 200px;margin: 200px auto;/* 加载动画效果 id---meinv10s一个循环linear---线性过渡 动画infinite---无限循环播放动画*/animation: meinv 10s linear infinite;}.abc:hover {/* 给.abc加上伪类效果，当获得焦点时，动画会暂停播放，失去焦点后，动画继续播放 */animation-play-state: paused;}.abc div {position: absolute;top: 0;left: 0;background: url(./img/wmen.png) round;width: 100%;height: 100%;}@keyframes meinv {0% {/* 给动画添加旋转效果 开始位置时为Y轴的0度 */transform: rotateY(0);}100% {/* 给动画添加旋转效果 结束位置时为Y轴的360度 */transform: rotateY(360deg);}}/* 先调好每张图片的朝向角度然后摆放各个图片的位置 距离中心点的Z轴为400px */.abc div:nth-child(1) {transform: translateZ(300px) ;}.abc div:nth-child(2) {transform:rotateY(60deg) translateZ(300px);}.abc div:nth-child(3) {transform:rotateY(120deg) translateZ(300px);}.abc div:nth-child(4) {transform:rotateY(180deg) translateZ(300px);}.abc div:nth-child(5) {transform:rotateY(240deg) translateZ(300px);}.abc div:nth-child(6) {transform:rotateY(300deg) translateZ(300px);}.abc div:nth-child(7) {background: url(./img/元龙.png) round;} </style>

CSS3 旋转木马图片动画(transform+Animation)相关推荐

css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
css3中的动画学习分享
大家好,这里是demo软件园,今天为大家分享的是css3中的动画(animation). css3动画: 使元素从一种样式逐渐变化为另一种样式的效果. 动画原理:通过把人物的表情.动作.变化等分解后画 ...
CSS3 变形过渡动画
文章目录 CSS3 变形过渡动画 transform(变形) 概述 translate() 平移 scale() 缩放 skew() 倾斜 rotate() 旋转 transform-origin ...
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...
html css图片展开动画,8个实用炫酷的HTML5图片动画应用
本文作者html5tricks,转载请注明出处近期我们发布了不少关于 1.CSS3/jQuery实现移动端滑动图片层叠效果这是一款基于jQuery和CSS3的图片层叠插件,这和我们之前介绍的CSS ...
3d布局图 html5,8个实用炫酷的HTML5图片动画应用 | HTML5资源教程
近期我们发布了不少关于 1.CSS3/jQuery实现移动端滑动图片层叠效果这是一款基于jQuery和CSS3的图片层叠插件,这和我们之前介绍的CSS3图片层叠展开特效有点不同,它支持鼠标滑动切换图 ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
css3 transform animation 动画小结
css3 transform animation 动画小结最近在策划自己的博客,本来是想写一个酷炫可以让人玩的,全是动画的页面, 结果哎 - - 可以说是非常失败了,这是一个刷牙的动画,变色的 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...

CSS3 旋转木马图片动画(transform+Animation)

效果图

HTML代码

CSS代码

CSS3 旋转木马图片动画(transform+Animation)相关推荐

最新文章

热门文章