HTML——3D旋转+动画旋转木马案例

旋转木马案例

效果
外面的图片围绕中间的图片旋转，鼠标悬停停止旋转。

思路
不用鼠标悬停就能实现旋转需要用到动画来实现，@keyframes内设置transform: rotateY();当鼠标悬停时动画停止则利用伪类选择器:hover实现。要想实现动画停止效果，则需要用到播放状态animation-play-state；（默认running）鼠标放在上面就会停止用paused。

代码

<section><div></div><div></div><div></div><div></div><div></div><div></div></section>

先为大盒子section设置宽高和背景

section {position: relative;width: 276px;height: 271px;margin: 200px auto;background: url(图片/钟离.jpg);}

再为其他子盒子设置宽高、背景，利用绝对定位和margin负值进行水平、垂直居中。每个div进行旋转，移动到一定的位置。

section div {position: absolute;top: 50%;left: 50%;margin-left: -33px;margin-top: -33px;width: 66px;height: 66px;border-radius: 50%;}section div:nth-child(1) {background: url(图片/水.jpg);transform: translateZ(300px);z-index: 1;}section div:nth-child(2) {background: url(图片/火系.jpg);transform: rotateY(-60deg) translateZ(300px);}section div:nth-child(3) {background: url(图片/雷系.jpg);transform: rotateY(-120deg) translateZ(300px);}section div:nth-child(4) {background: url(图片/岩.jpg);transform: rotateY(-180deg) translateZ(300px);}section div:nth-child(5) {background: url(图片/冰元素.jpg);transform: rotateY(-240deg) translateZ(300px);}section div:nth-child(6) {background: url(图片/风.jpg);transform: rotateY(-300deg) translateZ(300px);}

设置动画。

@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}

父盒子引用动画，设置infinite进行动画循环。

section {transition: all 15s;transform-style: preserve-3d;animation: rotate 10s linear infinite;}

设置伪类。

section:hover {/* 鼠标放入就会暂停 */animation-play-state: paused;}

最后body别忘了设置perspective使具有三维位置变换的元素产生透视效果。（perspective设置在被观察者的父盒子上）。

body {perspective: 500px;}

HTML——3D旋转+动画旋转木马案例相关推荐

CSS3 3D转换和旋转木马案例
文章目录前言有什么特点一.三维坐标系 3D转换二.3D移动translate3d 三.透视perspective 四.translateZ 五.3D旋转rotate3d 六. 3D呈现tran ...
Android做3D旋转动画,Android编程实现3D旋转效果实例
本文实例讲述了Android编程实现3D旋转效果的方法.分享给大家供大家参考,具体如下: 下面的示例是在Android中实现图片3D旋转的效果. 实现3D效果一般使用OpenGL,但在Android平 ...
JavaScript、Vue实现大数据大屏展示3D旋转动画效果
效果最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果,简单整理之后写了一个小demo做下记录,先看一下效果: 当点击next的时候,整个模块旋转切换到下个菜单,点击prev的时候也可以切换到 ...
HTML5 3D旋转动画案例
效果代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...
css3加js 3d旋转动画围绕旋转根据请求后台的数据动态渲染
3d 围绕旋转 <style>body {height: auto !important;background-color: #020432;}html{height: auto !imp ...
CSS3 3D旋转动画
话不多说,先上效果图: 代码: <span style="font-size:18px;"><span style="font-size:18px;&q ...
HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️
CSS3鼠标滑过图片3D旋转动画
在线演示本地下载

HTML——3D旋转+动画旋转木马案例

旋转木马案例

HTML——3D旋转+动画旋转木马案例相关推荐

最新文章

热门文章

HTML——3D旋转+动画 旋转木马案例

旋转木马案例

HTML——3D旋转+动画 旋转木马案例相关推荐

最新文章

热门文章

HTML——3D旋转+动画旋转木马案例

HTML——3D旋转+动画旋转木马案例相关推荐