旋转木马 css,CSS:3D旋转木马效果

最新推荐文章于 2024-06-24 14:23:18 发布

H等等H

最新推荐文章于 2024-06-24 14:23:18 发布

阅读量524

点赞数

文章标签：旋转木马 css

一个简单有趣的css动画

3D旋转木马效果

* {

margin: 0px;

padding: 0px;

}

#box {

width: 200px;

height: 300px;

animation: rotate 20s linear infinite;

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto auto;

transform-style: preserve-3d;

}

img {

width: 100%;

position: absolute;

}

img:nth-child(1) {

transform: rotateY(0) translateZ(600px);

}

img:nth-child(2) {

transform: rotateY(36deg) translateZ(600px);

}

img:nth-child(3) {

transform: rotateY(72deg) translateZ(600px);

}

img:nth-child(4) {

transform: rotateY(108deg) translateZ(600px);

}

img:nth-child(5) {

transform: rotateY(144deg) translateZ(600px);

}

img:nth-child(6) {

transform: rotateY(180deg) translateZ(600px);

}

img:nth-child(7) {

transform: rotateY(216deg) translateZ(600px);

}

img:nth-child(8) {

transform: rotateY(252deg) translateZ(600px);

}

img:nth-child(9) {

transform: rotateY(288deg) translateZ(600px);

}

img:nth-child(10) {

transform: rotateY(324deg) translateZ(600px);

}

@keyframes rotate {

0% {

transform: rotateX(0) rotateY(0);

}

25% {

transform: rotateX(20deg) rotateY(180deg);

}

50% {

transform: rotateX(0) rotateY(360deg);

}

75% {

transform: rotateX(-20deg) rotateY(540deg);

}

100% {

transform: rotateX(0) rotateY(720deg);

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

H等等H

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

css实现3D旋转木马

yjwlike的博客

01-14

353

先看效果图 : 实现源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g...

CSS实现旋转木马效果

yigetutouzai的博客

07-13

1090

css3新增了很多强大的属性，能够实现很多动画效果，下面让我们来实现一个旋转木马的效果把

参与评论您还未登录，请先登录后发表或查看评论

css旋转木马特效

weixin_52923266的博客

01-13

441

本文章带来了非常帅的旋转木马特效,利用纯html+css打造而成。核心技术:动画+2D转换+透视效果+背景图片居中平铺。

CSS旋转木马的效果

茶理li

07-05

226

代码： HTML部分 <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"&gt

css 实现旋转木马效果

weixin_47863904的博客

11-01

1349

旋转木马效果

HTML5+css3：3D旋转木马效果相册

01-21

效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~ 1、perspective perspective属性包括两个属性：none和具有单位的长度值。其中perspective属性的默认值为none，...

JS 3D相册旋转木马网页特效、3D动画、3D相册旋转木马

02-27

JS 3D相册旋转木马网页特效、3D动画、3D相册旋转木马 ...JS 3D相册旋转木马网页特效是一款炫酷的3D相册旋转木马网页特效，除了图片相册、增加了视频播放和背景音乐播放，相对比普通3D相册旋转木马，功能上了一个层次。

HTML+CSS实现3D旋转木马效果.zip

05-09

用HTML+CSS制作3D旋转木马效果用HTML+CSS制作3D旋转木马效果用HTML+CSS制作3D旋转木马效果用HTML+CSS制作3D旋转木马效果用HTML+CSS制作3D旋转木马效果用HTML+CSS制作3D旋转木马效果用HTML+CSS制作...

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册实例源码

07-12

3D旋转木马效果相册利用了CSS3的transform属性，尤其是rotateY()和perspective属性，这两个属性结合可以创建出立体的3D旋转效果。rotateY()函数负责沿着Y轴进行旋转，而perspective属性则设置观察者到3D变换原点的...

css3-3d-transform:90行代码实现图片旋转木马3D效果

05-21

css3-3d转换仅需关键代码50行实现一个3D类似旋转木马的图片浏览功能 ##代码位数 <!DOCTYPE html > < html > < head > < title > Css3-3d-transform__实现图片旋转木马3D效果</ title > </ head > < style > # doc { height : 600 px ; position : relative; overflow : hidden; background-color : # ddd ; } # stage { width : 1000 px ; margin : 100 px auto 0 auto; height : 400 px ; -webkit-perspective : 800 px ; -moz-perspective : 800 px ;

CSS3 transform实现图片旋转木马3D

10-20

css3 transform 3D 图片旋转木马

纯css实现的旋转木马效果（旋转相册）

lookingForw_4585的博客

10-01

797

纯css实现的旋转木马效果（旋转相册）值此双节之际，祝各位双节快乐，每天开心，财源广进。啊哈哈~~ 话不多说，先看效果：完整代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墙效果</title> <style type="text/css"> body, p, dl,

使用html+css实现的旋转木马效果

xingstudent的博客

07-19

2982

结构先给一个section父盒子在给里面放入6个div 对应你想放置图片的张数这里放六张图片 <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div&

CSS3D旋转木马效果+图片倒影特效

最新发布

2401_85123543的博客

06-24

301

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

CSS 特效 —— 旋转木马【原理详解】

朝阳39的博客

10-08

758

完整代码和效果见 https://demo.cssworld.cn/new/5/2-6.php 核心代码和原理详解给舞台设置视距 perspective .stage { perspective: 800px; } 给容器添加3D视图声明 .container { transform-style: preserve-3d; } 每个图片绝对定位，共用一个3D变换中心点 position: absolute; left: 0; bottom: 0; rotateY()旋转随图

HTML5 CSS3 专题：诱人的实例 3D旋转木马效果相册

2401_84009626的博客

03-31

823

最后小编想说：不论以后选择什么方向发展，目前重要的是把Android方面的技术学好，毕竟其实对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！这里附上我整理的几十套腾讯、字节跳动，京东，小米，头条、阿里、美团等公司19年的Android面试题。把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。由于篇幅有限，这里以图片的形式给大家展示一小部分。

CSS 过渡实现仿旋转木马效果

Erek的前端博客；

09-03

160

思路: 定义一个数组,存数个class类名,对应类名定义位置等样式,5秒一个定时器,将存放class类名的数组最后一个元素移动到第一个,因为有过度效果,所以有动画效果 html <div class="icon-layout"> <div class="icon-item" :class="icon_position[index]" v-for="(item ,index) in 6"> <div class="info">{{inde..

css3 3d旋转案例：旋转木马

m0_51495354的博客

11-30

411

css3 3d旋转案例：旋转木马

css3 transform实现图片旋转木马3d

09-09

CSS3 transform属性可以实现图片旋转木马3D效果。通过使用旋转和位移变换，我们可以使一组图片像在一个旋转木马上一样循环展示。首先，我们需要一个包含图片的HTML容器，例如一个div元素，并将其设置为相对定位(position: relative)，以便我们可以对其中的图片进行绝对定位。然后，我们可以使用CSS3的transform属性来对每个图片进行旋转和位移变换。通过设置rotateY()和translateZ()等函数来实现3D旋转效果。其中，rotateY()函数可以设置图片绕Y轴旋转的角度，而translateZ()函数可以设置图片在Z轴上的位移。接着，我们可以使用CSS3的transition属性来添加过渡效果。通过设置transition属性，我们可以使图片在旋转过程中平滑过渡。最后，为了实现旋转木马的效果，我们可以使用CSS3的animation属性来循环播放。通过设置animation属性，我们可以定义动画的名称、总时间、循环次数等属性，以便图片可以循环播放。通过以上步骤，我们可以利用CSS3的transform属性实现图片旋转木马3D效果。这样，我们就可以在网页中展示一个漂亮且动态的图片旋转木马效果。