CSS——正方体360°旋转动画 效果

article/2025/11/3 16:34:24

先看效果:

 代码如下:

<!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"><title>Document</title><style>.warpper {margin: 500px;perspective: 1600px;position: relative;perspective-origin: 50% 50%;}.first_box {width: 100px;height: 100px;line-height: 100px;font-size: 26px;text-align: center;transform-style: preserve-3d;animation: move 2s linear infinite;}.box {opacity: 0.5;position: absolute;width: 100px;height: 100px;}.box1 {transform: translateZ(50px);background-color: seagreen;}.box2 {transform: translateZ(-50px);background-color: sienna;}.box3 {transform: rotateX(90deg) translateZ(50px);background-color: red;}.box4 {background-color: #000000;transform: rotateX(-90deg) translateZ(50px);}.box5 {background-color: #004c8b;transform: rotateY(-90deg) translateZ(50px);}.box6 {background-color: #d1bd08;transform: rotateY(90deg) translateZ(50px);}@keyframes move {100% {transform: rotateY(360deg) rotateX(360deg);}}</style>
</head><body><div class="warpper"><div class="first_box"><div class="box1 box">box1</div><div class="box2 box">box2</div><div class="box3 box">box3</div><div class="box4 box">box4</div><div class="box5 box">box5</div><div class="box6 box">box6</div></div></div>
</body>
</html>


http://chatgpt.dhexx.cn/article/ItwliAmd.shtml

相关文章

css3动画—旋转

css3动画旋转&#xff0c;内圆顺时针旋转&#xff0c;外圆逆时针旋转 1、html <img src"img/about-img07.png" class"circle01 circle-pst"> <img src"img/about-img06.png" class"circle02 circle-pst">2、css .circle…

CSS - 音乐盒 360° 无限循环旋转动画(元素转圈)

前言 由于 Gif 图片过小的问题&#xff0c;显得很不流畅&#xff0c;真实情况下很流畅&#xff0c;放心。 实现一个 360 无限循环旋转的动画&#xff0c;如下图所示&#xff1a; 示例代码 注意&#xff1a;通过 animation 复合属性&#xff0c;可控制动画旋转速度及其他参数。…

css旋转动画定义中心,css动画(transition/transform/animation)

在开发中&#xff0c;一个好的用户操作界面&#xff0c;总会夹杂着一些动画。css用对少的代码&#xff0c;来给用户最佳的体验感&#xff0c;下面我总结了一些css动画属性的使用方法及用例代码供大家参考&#xff0c;在不对的地方&#xff0c;希望大佬直接拍砖评论。 1 transit…

利用css3实现立体旋转动画效果

css3实行一个转动的六边形 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>body,html {width: 100%;height: 100%;}body {perspective: 1000px;}.container {/* 给容器设置一个高宽 */width: 3…

CSS实现旋转风车

CSS实现旋转风车 使用css实现旋转风车主要是运用border和css动画来实现的&#xff0c;效果图如下&#xff1a; 一、制作风车 首先观察风车是由8个相等形状大小的三角形旋转组成的&#xff0c;可以发现都是围绕一个中心点旋转组成的&#xff0c;所以我们可以先用border画出一…

CSS的动画效果-旋转

开发工具与关键技术&#xff1a;css 撰写时间&#xff1a;2020/7/7 这是简陋的小风车 当我们将鼠标移入到该区域式这个小风车就会旋转起来 这是这个小风车的代码 Html&#xff1a; Css&#xff1a; 本人只是个新手&#xff0c;只是将风车放置Ul标签内&#xff0c;设置ul标签的…

Css动画效果旋转图片

这次给大家讲解一个有趣的css动画效果哈&#xff0c;那就是旋转图片成一朵花型。 第一步依旧是把img标签敲出来然后把图片放上去。 2.然后开始敲打css样式和效果&#xff0c;先给个class设置一下样式加个定位&#xff0c;因为动画效果需要个定 位才能有效果显示出来。…

旋转的css动画效果

需要补习动画属性的可以查看这个文章 效果图 css旋转代码 .image {width: 250px;height: 250px;border-radius: 50%;//定义动画名,持续时间,动画状态,以及持续运行animation: rotate 15s infinite linear;//控制暂停和播放animation-play-state: play;}keyframes rotate {form…

CSS3 旋转动画

效果图 用到图片&#xff1a; 实现&#xff1a; <body><div class"wrap"><image class"figure" src"./staitc/images/figure.png" /><imageclass"circle circle-inner"src"./staitc/images/circle-in…

纯css图片自动旋转动画

css能否实现图片自动旋转动画呢&#xff1f;答案当然是肯定的&#xff0c; 首先看下效果&#xff1a; HTML代码 <img src"https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fimg.yipic.cn%2Fthumb%2Fda6639c9%2F814ac8bc%2Ff0e92a5b%2Fedda1715%2Fbig_da6639c9…

动画css ---无限旋转

前言&#xff1a; 接口返回数据&#xff0c;处理数据后&#xff0c;需要根据状态显示对应的图片 如果是状态为运行中&#xff0c;图片对应的icon图片需要沿中心点旋转起来&#xff08;加一个带有旋转的class类&#xff09; 图片素材 <!DOCTYPE html> <html lang"…

CSS——动画{旋转按钮}

前面我们一直在学习样式&#xff0c;学习布局&#xff0c;什么浮动啊&#xff0c;定位呀&#xff0c;还有弹性盒子&#xff0c;那么今天我们来看一点不一样的——动画&#xff01; 文章目录 前言一、动画是什么&#xff1f;二、动画的属性 1.过渡2.实际应用和代码演示总结 前言…

css实现加载旋转动画

先看效果&#xff1a; 完整代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&q…

CSS基础学习——动画

一、CSS3 2D变形&#xff08;利用Transfrom方法&#xff09; 1、rotate&#xff08;angle&#xff09; 元素顺时针旋转给定的角度。允许负值&#xff0c;元素将逆时针旋转。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…

深度学习与神经网络

文章目录 引言1. 神经网络1.1 什么是神经网络1.2 神经元1.3 多层神经网络 2. 激活函数2.1 什么是激活函数2.2 激活函数的作用2.3 常用激活函数解析2.4 神经元稀疏 3. 设计神经网络3.1 设计思路3.2 对隐含层的感性认识 4. 深度学习4.1 什么是深度学习4.2 推理和训练4.3 训练的相…

【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇?

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名。 我们来看看各路大神是怎么评价的。 论文链接 https://arxiv.org/abs/1410.3916 关于计算机视觉领域&#xff0c;taokongcn分享了几个重要的工作。 1. Fully Convolutional Netw…

深度学习笔记(三)Cv方向

一.批量归一化和残差网络 批量归一化 对输入的标准化&#xff08;浅层模型&#xff09; 处理后的任意一个特征在数据集中所有样本上的均值为0、标准差为1。 标准化处理输入数据使各个特征的分布相近。 批量归一化&#xff08;深度模型&#xff09; 利用小批量上的均值和标准差…

R-C3D:用于时间活动检测的区域3D网络

论文&#xff1a;R-C3D: Region Convolutional 3D Network for Temporal Activity Detection&#xff08;2017&#xff09; 主要贡献 1.提出一个包括活动候选区和任意长度活动的分类的端到端模型。如下图所示 2.提出在候选区生成和分类部分共享全卷积C3D特征&#xff0c;实现了…

[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的性能 循环神经网络&#xff08;RNN&#xff09;具有神奇的功能。我还记得当我训练我的第一个关于图像字幕的循环网络。在训练了几十分钟后&#xff0c;模型的雏形&#xff08;使用相当随意选择的超参数&#xff09;开始产生对图像有意义的描述&am…

NNDL 作业8:RNN - 简单循环网络

目录 1. 使用Numpy实现SRN 2. 在1的基础上&#xff0c;增加激活函数tanh 3. 分别使用nn.RNNCell、nn.RNN实现SRN 4. 分析“二进制加法” 源代码&#xff08;选做&#xff09; 5. 实现“Character-Level Language Models”源代码&#xff08;必做&#xff09; 6. 分析“序…