html设置旋转角度,CSS3 旋转角度控制

最新推荐文章于 2023-06-14 20:54:09 发布
最新推荐文章于 2023-06-14 20:54:09 发布
阅读量1k 收藏
点赞数
文章标签： html设置旋转角度
这段CSS代码创建了一个3D旋转效果，包含一个400px的容器，内部有多个小球以不同角度旋转并沿着X轴移动。动画通过设置不同的旋转角度和延迟时间，使得每个小球产生连续的视觉流动感。背景为黑色，整个布局居中对齐，显示了CSS在网页动画设计中的应用。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

/* Rotation angle for the current item */

/* Angle between two items */

html,

body {

height: 100%;

}

body {

background: black;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.container {

width: 400px;

height: 400px;

position: relative;

border-radius: 50%;

-webkit-animation: spin 25s linear infinite;

animation: spin 25s linear infinite;

}

.subcontainer {

width: 25px;

height: 25px;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.balls {

width: 25px;

height: 25px;

position: absolute;

}

.balls:nth-child(1):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.07s;

animation-delay: 0.07s;

}

.balls:nth-child(1) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(24deg);

transform: rotateZ(24deg);

}

.balls:nth-child(2):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.14s;

animation-delay: 0.14s;

}

.balls:nth-child(2) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(48deg);

transform: rotateZ(48deg);

}

.balls:nth-child(3):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.21s;

animation-delay: 0.21s;

}

.balls:nth-child(3) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(72deg);

transform: rotateZ(72deg);

}

.balls:nth-child(4):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.28s;

animation-delay: 0.28s;

}

.balls:nth-child(4) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(96deg);

transform: rotateZ(96deg);

}

.balls:nth-child(5):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.35s;

animation-delay: 0.35s;

}

.balls:nth-child(5) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(120deg);

transform: rotateZ(120deg);

}

.balls:nth-child(6):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.42s;

animation-delay: 0.42s;

}

.balls:nth-child(6) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(144deg);

transform: rotateZ(144deg);

}

.balls:nth-child(7):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.49s;

animation-delay: 0.49s;

}

.balls:nth-child(7) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(168deg);

transform: rotateZ(168deg);

}

.balls:nth-child(8):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.56s;

animation-delay: 0.56s;

}

.balls:nth-child(8) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(192deg);

transform: rotateZ(192deg);

}

.balls:nth-child(9):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.63s;

animation-delay: 0.63s;

}

.balls:nth-child(9) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(216deg);

transform: rotateZ(216deg);

}

.balls:nth-child(10):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.7s;

animation-delay: 0.7s;

}

.balls:nth-child(10) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(240deg);

transform: rotateZ(240deg);

}

.balls:nth-child(11):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.77s;

animation-delay: 0.77s;

}

.balls:nth-child(11) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(264deg);

transform: rotateZ(264deg);

}

.balls:nth-child(12):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.84s;

animation-delay: 0.84s;

}

.balls:nth-child(12) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(288deg);

transform: rotateZ(288deg);

}

.balls:nth-child(13):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.91s;

animation-delay: 0.91s;

}

.balls:nth-child(13) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(312deg);

transform: rotateZ(312deg);

}

.balls:nth-child(14):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 0.98s;

animation-delay: 0.98s;

}

.balls:nth-child(14) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(336deg);

transform: rotateZ(336deg);

}

.balls:nth-child(15):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 1.05s;

animation-delay: 1.05s;

}

.balls:nth-child(15) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(360deg);

transform: rotateZ(360deg);

}

.balls:nth-child(16):after {

width: 25px;

height: 25px;

border-radius: 50%;

display: block;

content: "";

-webkit-animation: move 2s linear infinite;

animation: move 2s linear infinite;

-webkit-animation-delay: 1.12s;

animation-delay: 1.12s;

}

.balls:nth-child(16) {

left: -200px;

-webkit-transform-origin: 212.5px 12.5px;

-ms-transform-origin: 212.5px 12.5px;

transform-origin: 212.5px 12.5px;

-webkit-transform: rotateZ(384deg);

transform: rotateZ(384deg);

}

.balls:nth-child(3n+1):after {

background-color: #faaa13;

color: #faaa13;

}

.balls:nth-child(3n+2):after {

background-color: #f03e31;

color: #f03e31;

}

.balls:nth-child(3n+3):after {

background-color: #10a0ab;

color: #10a0ab;

}

@-webkit-keyframes spin {

from {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

@keyframes spin {

from {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

@-webkit-keyframes move {

0% {

-webkit-transform: translateX(0px);

transform: translateX(0px);

box-shadow: -2px 0px 2px, 5px 0px 2px, 10px 0px 2px, 15px 0px 2px, 20px 0px 2px, 25px 0px 2px, 30px 0px 2px;

}

23% {

box-shadow: none;

}

25% {

box-shadow: -2px 0px 2px, 5px 0px 2px, 10px 0px 2px, 15px 0px 2px, 20px 0px 2px, 25px 0px 2px, 30px 0px 2px;

-webkit-transform: translateX(400px);

transform: translateX(400px);

}

48% {

box-shadow: none;

}

50% {

-webkit-transform: translateX(400px);

transform: translateX(400px);

}

75% {

-webkit-transform: translateX(400px);

transform: translateX(400px);

}

100% {

-webkit-transform: translateX(0px);

transform: translateX(0px);

}

}

@keyframes move {

0% {

-webkit-transform: translateX(0px);

transform: translateX(0px);

box-shadow: -2px 0px 2px, 5px 0px 2px, 10px 0px 2px, 15px 0px 2px, 20px 0px 2px, 25px 0px 2px, 30px 0px 2px;

}

23% {

box-shadow: none;

}

25% {

box-shadow: -2px 0px 2px, 5px 0px 2px, 10px 0px 2px, 15px 0px 2px, 20px 0px 2px, 25px 0px 2px, 30px 0px 2px;

-webkit-transform: translateX(400px);

transform: translateX(400px);

}

48% {

box-shadow: none;

}

50% {

-webkit-transform: translateX(400px);

transform: translateX(400px);

}

75% {

-webkit-transform: translateX(400px);

transform: translateX(400px);

}

100% {

-webkit-transform: translateX(0px);

transform: translateX(0px);

}

}

小小羊羊羊
关注
html中坐标轴旋转角度,CSS3 旋转rotate()rotatex()rotatey()应用实例
weixin_29190651的博客
06-03 6272
CSS3中，对象转换有多种方式，其中一种为旋转rotate()，主要是围绕X轴或Y轴旋转，所以rotate()又要细分为rotatex()和rotatey()，前者用于设置对象围绕X轴旋转，后者用于设置对象围绕Y轴旋转。rotate既可控制对象作2D旋转，又可控制对象作3D旋转，本篇先介绍作2D旋转的语法规则和应用实例，后续篇章再介绍作3D旋转的情况。下面先看rotatex()、rotatey()...
CSS 设置图片旋转角度
qq_42617840的博客
10-08 2914
img{ transform: rotate(XXdeg); }
html 直线旋转,旋转任意角度 如何让div旋转一定的角度
weixin_30767863的博客
05-31 420
m11,m12,m21.m22是控制角度的复制代码代码如下:DIV旋转属性的演示body {font-family: "Arial", sans-serif;}#example {position: absolute;border: #09F solid 1px;font-weight: 900;padding: 10px;display: block;width: 500px;height: 4...
html5 简单 旋转角度原理 时针
weixin_30721899的博客
07-20 789
html5 简单 旋转角度原理 时针 1 <!doctype html> 2 <html> 3 <head> 4 <title>html5 简单 旋转角度原理 时针</title> 5 6 <script type="text/javascri...
html中怎么让字母旋转,css3如何设置元素不停旋转？
weixin_42513616的博客
05-30 512
我们在进行网页页面设计时，经常会遇到各种关于图片展示的问题，比如有的需要让图片圆角展示、图片点击放大展示等等效果。本篇文章将要给大家详细介绍如何使用css3让图片实现不停旋转的效果。主要就给大家介绍用css3实现图片自动循环360旋转的具体方法css可以使用transform 属性设置元素进行旋转、缩放、移动或倾斜。我们可以使用css样式transform:rotate(360deg)设置元素旋转...
Html5+CSS3实现3D旋转效果
04-16
可能包含多个HTML元素，每个元素都有不同的3D旋转效果，通过CSS3的`class`或`id`选择器，我们可以独立控制每个元素的旋转。同时，JavaScript代码负责处理用户的交互和动画逻辑。 为了增强3D效果，我们还可以使用CSS...
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
09-25
本文将详细解析如何使用纯CSS3实现一个可自定义旋转角度的圆形分享按钮。这个功能在现代网页设计中非常常见，能够为用户界面增添动态效果，提高用户体验。我们将探讨实现这一效果的关键CSS属性和技术。 首先，这个...
纯HTML5+CSS3制作图片旋转
09-24
`from`设置了初始旋转角度为0度，`to`则将最终旋转角度设为360度，这相当于一个完整的圆形旋转。 此外，我们还添加了一个`:hover`伪类，当鼠标悬停在图片上时，通过`-webkit-animation-play-state: paused;`暂停...
HTML5CSS3 3D环形图片墙 伴随旋转动画
11-03
此外，HTML5的`data-*`自定义属性可以用来存储与图片相关的信息，如旋转角度、缩放比例等，这些信息将在CSS3的动画中用到。 接着，CSS3的3D转换功能在这里发挥了关键作用。CSS3的`transform`属性允许对元素进行平移...
html中自动旋转90度,如何将HTML旋转90度？
weixin_42516005的博客
05-31 3093
您需要使用CSS才能实现此目的，例如：#container_2 {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}演示：#container_2 {widt...
【LeetCode刷题】48. 旋转图像
机器学习初学者必看，关注我，一起了解机器学习
10-21 258
旋转图像 给定一个 n × n 的二维矩阵表示一个图像。 将图像顺时针旋转 90 度。 说明： 你必须在原地旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。 示例 1: 给定 matrix = [ [1,2,3], [4,5,6], [7,8,9] ], 原地旋转输入矩阵，使其变为: [ [7,4,1], [8,5,2], [9,6,3] ] public static void rotate(int[][] matrix) { if(matrix..
html图片旋转任意角度,将图像快速旋转任意角度 - jixu2008的日志 - VB爱好者乐园(VBGood) - Powered by Discuz!...
weixin_39649614的博客
06-04 457
' '下面是窗体代码，在 VB6 调试通过'需在窗体放置以下 6 个控件，所有控件不必设置任何属性(包括位置和大小)，全部采用默认设置：'Command1、Command2、Label1、Picture1、Text1、Combo1'本人原创，转载请注明文章来源：http://hi.baidu.com/100bd/blog/item/400ce7c90c6cc7057e3e6fa0.htmlP...
html调整字体角度,在html中，如何使用css样式让一个元素或者文字旋转角度
weixin_31077513的博客
06-15 1186
今天在使用html一些特殊符号的时候，使用了¡这个符号，下面是加过样式后的效果因为和正常的感叹号不太一样，选择使用样式让它旋转到一定的角度在css3的样式里有transform 属性div{transform:rotate(180deg);-ms-transform:rotate(180deg);/* IE 9 */-moz-transform:rotate(180deg);/* Firefox ...
html结束旋转角度,如何在javascript中设置div的旋转角度？
weixin_39610785的博客
06-05 370
或者更一般地说,有没有办法在没有JQuery的情况下在javascript中为HTML元素添加任意CSS？现在,这适用于Chrome,Firefox和IE 9/10.var css = getRotationCSS(angle);var div = document.getElementById('mydiv');//div.css = css; ???div.innerHTML = 'HELLO...
获取当前按钮旋转的角度
04-01 428
html旋转角度计算,CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） | 0101后花园...
weixin_35794835的博客
06-21 1791
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) | 0101后花园2018-09-26在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的...
如何元素定位居中
u014748857的博客
04-14 155
position: absolute;top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
css中的“ transform: translate(-50%, -50%)； “的意思
最新发布
qq_45207162的博客
06-14 6278
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值