css3好看的六图3D旋转

最新推荐文章于 2022-06-20 19:10:06 发布
最新推荐文章于 2022-06-20 19:10:06 发布
阅读量397 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42578251/article/details/95340385
版权

html:

<html><head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>cs3旋转动画实现地球周转</title>
<link rel="stylesheet" href="./css.css">
<script type="text/javascript" src="./js.js"></script>
</head>
<body>
<div id="content">
<div class="inner pr">
<div class="con_bg ">
<div class="section3">
<div class="u_fr">
<div class="ui_base u_p3d">
<div class="ball_c"></div>
<div  id="baseall"  class="base u_p3d">
<div class="ball_base u_p3d ball_1">
<div  id="base11" class="ball">
<img src="./_09.png" alt=""></div></div>
<div class="ball_base u_p3d ball_2">
<div id="base22"  class="ball">
<img src="./_33.png" alt=""></div></div>
<div class="ball_base u_p3d ball_3">
<div id="base33" class="ball">
<img src="./_14.png" alt=""></div></div>
<div class="ball_base u_p3d ball_4">
<div id="base44" class="ball">
<img src="./_03.png" alt=""></div></div>
<div class="ball_base u_p3d ball_5">
<div id="base55" class="ball">
<img src="./_27.png" alt=""></div></div>
<div class="ball_base u_p3d ball_6">
<div id="base66" class="ball">
<a href=''><img src="./_30.png" alt=""></a></div>
</div></div></div></div></div></div></div></div></body></html>

css:

.section3 .ball_base {	background:blue;}
.section3 .base{	background:green;}
.section3 .ball {	background:#9c4227;} 
.section3{width:1000px;height:680px;margin:40px auto 0;background:url(../img/147_03.png) 32px 65px no-repeat}
.u_p3d{-webkit-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}
.section3 .ui_base{position:relative;top:90px;left:280px;width:400px;height:0;-webkit-perspective:1000px;-moz-perspective:1000px;-ms-perspective:1000px;-o-perspective:1000px;perspective:1000px;-webkit-perspective-origin:50% 0%;-moz-perspective-origin:50% 0%;-o-perspective-origin:50% 0%;-ms-perspective-origin:50% 0%;perspective-origin:50% 0%}
.section3 .ball_c{-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;position:absolute;width:225px;height:157px;line-height:157px;text-align:center;background:url(../img/zfzs.png) no-repeat;left:90px;top:100px}
.section3 .ball_c img{width:125px;height:125px;border-radius:10px}
.section3 .ball_c p{margin-top:-70px}
.section3 .ball_c p a{font-size:19px;font-family:""}
.section3 .base{-webkit-transform:rotateX(80deg) rotateY(-10deg);-moz-transform:rotateX(80deg) rotateY(-10deg);-o-transform:rotateX(80deg) rotateY(-10deg);-ms-transform:rotateX(80deg) rotateY(-10deg);transform:rotateX(80deg) rotateY(-10deg);position:relative;width:350px;height:350px;-webkit-backface-visibility:hidden;backface-visibility:hidden;top:-38px;left:40px}
.section3 .ball_base{-webkit-transform-origin:225px 0;-moz-transform-origin:225px 0;-ms-transform-origin:225px 0;-o-transform-origin:225px 0;transform-origin:225px 0;position:absolute;top:175px;left:-50px;width:225px;height:127px}
.section3 .ball_1{transform:rotateX(-90deg) rotateY(0deg) translateY(-70px)}
.section3 .ball_2{transform:rotateX(-90deg) rotateY(60deg) translateY(-70px)}
.section3 .ball_3{transform:rotateX(-90deg) rotateY(120deg) translateY(-70px)}
.section3 .ball_4{transform:rotateX(-90deg) rotateY(180deg) translateY(-70px)}
.section3 .ball_5{transform:rotateX(-90deg) rotateY(240deg) translateY(-70px)}
.section3 .ball_6{transform:rotateX(-90deg) rotateY(300deg) translateY(-70px)}
.section3 .ball{-webkit-transition:all 2s ease-out 0ms;-o-transition:all 2s ease-out 0ms;-moz-transition:all 2s ease-out 0ms;-ms-transition:all 2s ease-out 0ms;transition:all 2s ease-out 0ms;-webkit-transform-origin:50% 50%;-o-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transform-origin:50% 50%;position:absolute;left:-200px;top:-30px;overflow:hidden}
.section3 .ball img{width:110px;height:110px}
.section3 .ball_1 .ball{-webkit-animation:cir1 28s linear 0s infinite;-o-animation:cir1 28s linear 0s infinite;-ms-animation:cir1 28s linear 0s infinite;-moz-animation:cir1 28s linear 0s infinite;}
.section3 .ball_2 .ball{-webkit-animation:cir2 28s linear 0s infinite;-o-animation:cir2 28s linear 0s infinite;-ms-animation:cir2 28s linear 0s infinite;-moz-animation:cir2 28s linear 0s infinite;animation:cir2 28s linear 0s infinite}
.section3 .ball_3 .ball{-webkit-animation:cir3 28s linear 0s infinite;-o-animation:cir3 28s linear 0s infinite;-ms-animation:cir3 28s linear 0s infinite;-moz-animation:cir3 28s linear 0s infinite;animation:cir3 28s linear 0s infinite}
.section3 .ball_4 .ball{-webkit-animation:cir4 28s linear 0s infinite;-o-animation:cir4 28s linear 0s infinite;-ms-animation:cir4 28s linear 0s infinite;-moz-animation:cir4 28s linear 0s infinite;animation:cir4 28s linear 0s infinite}
.section3 .ball_5 .ball{-webkit-animation:cir5 28s linear 0s infinite;-o-animation:cir5 28s linear 0s infinite;-ms-animation:cir5 28s linear 0s infinite;-moz-animation:cir5 28s linear 0s infinite;animation:cir5 28s linear 0s infinite}
.section3 .ball_6 .ball{-webkit-animation:cir6 28s linear 0s infinite;-o-animation:cir6 28s linear 0s infinite;-ms-animation:cir6 28s linear 0s infinite;-moz-animation:cir6 28s linear 0s infinite;animation:cir6 28s linear 0s infinite}
.section3 .base{-webkit-animation:cir 28s linear 0s infinite;-o-animation:cir 28s linear 0s infinite;-ms-animation:cir 28s linear 0s infinite;-mozanimation:cir 28s linear 0s infinite;animation:cir 28s linear 0s infinite}
@-webkit-keyframes cir1{0%{-webkit-transform:rotateY(0deg) rotateZ(10deg)}100%{-webkit-transform:rotateY(-360deg) rotateZ(10deg)}}
@keyframes cir1{0%{transform:rotateY(0deg) rotateZ(10deg)}100%{transform:rotateY(-360deg) rotateZ(10deg)}}
@-webkit-keyframes cir2{0%{-webkit-transform:rotateY(-60deg) rotateZ(10deg)}100%{-webkit-transform:rotateY(-420deg) rotateZ(10deg)}}
@keyframes cir2{0%{transform:rotateY(-60deg) rotateZ(10deg)}100%{transform:rotateY(-420deg) rotateZ(10deg)}}
@-webkit-keyframes cir3{0%{-webkit-transform:rotateY(-120deg) rotateZ(10deg)}100%{-webkit-transform:rotateY(-480deg) rotateZ(10deg)}}
@keyframes cir3{0%{transform:rotateY(-120deg) rotateZ(10deg)}100%{transform:rotateY(-480deg) rotateZ(10deg)}}
@-webkit-keyframes cir4{0%{-webkit-transform:rotateY(-180deg) rotateZ(10deg)}100%{-webkit-transform:rotateY(-540deg) rotateZ(10deg)}}
@keyframes cir4{0%{transform:rotateY(-180deg) rotateZ(10deg)}100%{transform:rotateY(-540deg) rotateZ(10deg)}}
@-webkit-keyframes cir5{0%{-webkit-transform:rotateY(-240deg) rotateZ(10deg)}100%{-webkit-transform:rotateY(-600deg) rotateZ(10deg)}}
@keyframes cir5{0%{transform:rotateY(-240deg) rotateZ(10deg)}100%{transform:rotateY(-600deg) rotateZ(10deg)}}
@-webkit-keyframes cir6{0%{-webkit-transform:rotateY(-300deg) rotateZ(10deg)}100%{-webkit-transform:rotateY(-660deg) rotateZ(10deg)}}
@keyframes cir6{0%{transform:rotateY(-300deg) rotateZ(10deg)}100%{transform:rotateY(-660deg) rotateZ(10deg)}}
@keyframes cir{0%{transform:rotateX(80deg) rotateY(-10deg) rotateZ(0deg)}100%{transform:rotateX(80deg) rotateY(-10deg) rotateZ(-360deg)}}
@-webkit-keyframes cir{0%{-webkit-transform:rotateX(80deg) rotateY(-10deg) rotateZ(0deg)}100%{-webkit-transform:rotateX(80deg) rotateY(-10deg) rotateZ(-360deg)}}

可以用js设置开始和暂停：

//暂停
document.getElementById('***').style.setProperty('animation-play-state','paused')；
开始
document.getElementById('***').style.setProperty('animation-play-state','');
或者
document.getElementById('***').style.setProperty('animation-play-state','running');
~蜡笔小浪~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【CSS】transition图片旋转案例-6张图片旋转特效
菜鸟码农
04-18 4885
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转练习</title> <style type="text/css"> /* S = 样式设置 */ ...
css:用css实现图片旋转轮播3d效果
weixin_43389331的博客
04-23 1606
CSS3的transform-style: :css3属性，在3d空间非常重要的一个属性，有两个值： flat 子元素将不保留其 3D 位置，默认值。 preserve-3d 子元素将保留其 3D 位置。 要注意的是ie不支持 transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 效果显示效果图 思路：把六张图片放在一起，每张图片转换角度，角度自己调试，中间一张图片作为中...
CSS3多张图片围绕圆圈做缓慢转动
zwf193071的专栏
08-07 5764
.circle{position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; width: 300px; height: 300px; border: 1px solid #333; border-radius: 50%;} .circle .c-circle{ width: 100%;
html5把六张图片做成立方体,一篇文章教会你利用html5和css3实现3D立方体效果图...
weixin_39921224的博客
05-31 1013
【一、项目背景】随着HTML5 CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚立方体是由六个面组成，分上下左右和前后，考虑这些可以帮助我们更好的融入CSS3的代码。因此我设置了6个div，作为立方体的6个面。因为定位的原因，一开始所有的盒子都是面对着屏幕这面的...
使用纯 CSS3 动画实现地球转动
热门推荐
wlx1991的专栏
12-27 1万+
旋转 * {margin:0; padding:0; border:0;} div {width:200px; height:200px; margin-left:100px; margin-top:-100px;} img {width:200px; height:200px; border-radius:100px; animation:myfirst 5s linear infinite;
044_CSS33D转换
aihiao的专栏
10-18 233
1.3D Transform 方法 2.rotate3d(x,y,z,angle)方法 2.1.rotate3d(x,y,z,angle)定义3D旋转。 2.2.x: 是一个0到１之间的数值, 主要用来描述元素围绕X轴旋转的矢量值; 2.3.y: 是一个０到１之间的数值, 主要用来描述元素围绕Y轴旋转的矢量值; 2.4.z: 是一个０到１之间的数值, 主要用来描述元素围绕Z轴旋转的矢量值; 2.5.angle: 是一个角度值, 主要用来指定元素在3D空间旋转的角度, 如果其值为正值表示元素顺
CSS3旋转动画地球周转特效.zip
07-11
代码简介：CSS3旋转动画地球周转特效是一款3D效果的旋转变形特效下载。
纯css3行星围着地球转动画
ICode联盟
06-20 398
下载地址使用css3的属性实现的行星围着地球转动画dd:
【css灵感】模拟3D地球
墨抒颖
01-23 761
在css中有3d变换的方法，一般用它做一些矩形的效果，如果是圆形则比较困难了。这里用一种障眼法的方式实现了3d的效果。 点击这里查看无纯净广告版 实现方法 <div class="css-inspiration-earth-planet-body"> <div class="css-inspiration-earth-planet-earth"></div> </div> <style> :root { --stars: 5vw
纯CSS3制作3D旋转球体
11-04
纯c制作3D旋转球体 纯CSS3制作3D旋转球体 纯CSS3制作3D旋转球体
轻量级CSS3立体式3D旋转动画效果.zip
07-03
一个非常简洁好看的纯CSS3旋转效果 当鼠标移动到图片上后，会立体式翻转显示隐藏的文字内容 鼠标移走后消失
纯CSS3模拟太阳、地球、月亮旋转效果特效代码
03-20
效果描述： 一个代码非常简洁的模拟地球、太阳和月亮之间旋转关系的动画效果 注意，没有使用任何js代码，纯CSS3实现，所以实用性更高 不兼容低版本浏览器
css3 3D旋转动画
10-16
css3 图片万花筒3D旋转动画特效=====================
纯CSS绘制漂亮的圆形图案效果
09-25
我曾经向大家分享了一个非常巧妙的用纯CSS画三角形的技巧（请见相关文章）。在过去的一年里，我发现这种用CSS画三角形的技术非常的有用和高效，尤其是创建提示框/提示符等类似的网页效果上。
CSS3爱心文字3D旋转动画特效
07-24
CSS3爱心文字3D旋转动画特效是一款情人节爱心文字表白动画，爱心3D旋转动画特效
CSS3 3D旋转rotate效果实例介绍
09-24
在CSS3中，3D旋转（rotate）是一个强大的特性，它允许元素在三维空间中进行旋转，从而为网页设计带来更丰富的动态效果。本实例主要介绍如何使用CSS3的3D旋转功能，通过rotateX、rotateY和rotateZ属性来实现不同轴上...
css3实现3d旋转动画特效
09-25
主要介绍了css3实现3d旋转动画特效，使用CSS3实现了3d立方体的左旋转，右旋转，上下旋转等效果，十分实用，有需要的小伙伴来参考下吧
逼真的Canvas 3D css3地球旋转动画特效.zip
07-11
代码片段：  
用css3写个3d旋转相册
最新发布
03-08
要用 CSS3 实现 3D 旋转相册，可以使用 transform 属性和 transition 属性。首先，需要将相册容器设置为 perspective 属性，以创建 3D 空间。然后，使用 transform 属性将相册中的每个图片旋转和平移，以创建 3D ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值