CSS3 transform:rotate(deg) 2D旋转效果

最新推荐文章于 2024-05-23 18:26:22 发布
最新推荐文章于 2024-05-23 18:26:22 发布
阅读量3.1k 收藏 1
点赞数 1
分类专栏： CSS3 文章标签： css3 旋转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boonyaxnn/article/details/61472979
版权 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>index</title>
		<meta name="description" content="">
		<meta name="author" content="boonya">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<style>
			body{
				background:url(img/a.jpg);
				background-size: 600px 800px;
				background-repeat: no-repeat;
				padding-top: 100px;
				color: #B21CAA;
				font-family: '楷体';
				size: 12px;
				text-shadow:10px 10px 5px #211A1A;/*文字阴影*/
			}
			div{
				transform:rotate(-30deg);/*div旋转，度数可正负*/
				width:200px;
				height: 100px;
				
				
			}
		</style>
	</head>
	<body>
		<div>
			<p>这是小妞！</p><br />
			<p>这是小妞！</p><br />
			<p>这是小妞！</p><br />
			<p>这是小妞！</p><br />
			<p>这是小妞！</p><br />
		</div>
	</body>
</html>

运行效果：


参考地址：http://www.w3school.com.cn/css3/css3_2dtransform.asp

boonyaxnn
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css3 transform旋转属性创建立体纹理文字特效
11-23
在本文中，我们将深入探讨如何使用CSS3的`transform`属性中的旋转功能来创建立体纹理文字特效。CSS3是 Cascading Style Sheets（层叠样式表）的第三个主要版本，它引入了许多新特性，大大增强了网页设计的灵活性和...
css3 transform创意的机械Loading加载动画效果
09-14
在本文中，我们将深入探讨如何使用CSS3的`transform`属性来创建富有创意的机械式Loading加载动画效果。`transform`属性是CSS3中的一个强大工具，它允许开发者对元素进行旋转、缩放、平移和倾斜等多种变换，极大地...
css3transform rotate,CSS3 Transform
weixin_39804603的博客
08-03 114
前面我们一起学习了CSS3中的CSS3制作动画的几个属性：CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲s...
CSS3-2D旋转-rotate（＜angle＞）
weixin_47295886的博客
08-04 180
CSS3-2D旋转-rotate（）
CSS transform 三大属性 rotate、scale、translate
最新发布
xiaoyuer_2020的博客
05-23 1162
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
css3transform rotate,CSS3详解：transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]...
weixin_31588005的博客
08-03 609
CSS3详解：transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]transform的属性包括：rotate() / skew() / scale() / translate(x,y) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。下面我们来分解各个属性的用法：1.旋转 rotate()：水平旋...
前端学习_CSS3_2d转换效果（移动、旋转、缩放）
m0_47717596的博客
05-01 467
前端学习——CSS3_2D转换效果 2D转换(transform) 2D转换是改变标签在二维平面上的位置和形状 移动： translate 旋转：rotate 缩放： scale 1. 移动 translate 语法 transform: translate(x, y) transform: translateX(n) transfrom: translateY(n) translate`最大的优点就是不影响其他元素的位置 translate中的100%单位，是相对于本身的宽度和高度来进行计
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
极客神殿
08-16 3678
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） 二.缩放 scale 用法：transform: scale(0.
旋转的正方体css3制作3D立体效果
09-08
CSS3的`transform`属性允许我们对元素进行2D和3D的变换，如旋转、缩放、平移等。对于3D变换，我们需要使用`transform-style: preserve-3d;`属性，这确保了子元素在3D空间内保持它们的3D结构，而不是扁平化。 接下来...
纯CSS3表情图片旋转动画特效
06-24
CSS3的`transform`属性允许我们对元素进行2D或3D的变换，如旋转（rotate）、缩放（scale）、平移（translate）和倾斜（skew）。在表情图片旋转动画中，关键就是`rotate`属性。通过设置`rotate`值，我们可以让图片绕...
CSS实现弹簧效果的旋转加载动画
09-24
总结来说，通过CSS的`transform`属性、`@keyframes`规则以及适当的`transform-origin`设置，我们可以创建出逼真的弹簧效果旋转加载动画。这种动画不仅增添了用户体验的趣味性，还可以有效地传达加载状态，让用户在...
2d的旋转
qq_53640252的博客
03-01 180
2d的旋转
css3利用transform实现简单的旋转效果
少吃点肉的博客
08-01 1723
Title @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .Rotation{ animati
CSS3转换属性（Transform）
qq_45799465的博客
01-26 3455
变形属性：transform transform翻译成汉语具有"变换"或者"改变"的意思。 通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果 最能体现transform 属性强大实力的是实现元素的3D变换效果 变形属性：transform的所有属性值 transform：none; 默认值 transform：translate（）； 移动 平移 单位是px transform：rotate（）； 旋转 单位是deg deg度数 ...
关于2D旋转基础总结
m0_60273757的博客
08-09 287
移动 translate 格式：transform:translate(x,y); X轴和Y轴同时移动 （合并书写，可分开书写） transform:translateX(n); 沿X轴移动 transform:translateY(n); 沿Y轴移动 举例：transform:translate(100px,50%); 沿X轴正方向移动100像素同时沿Y轴正方向移动盒子的50% transform:translateX(-100px);
css3 动画之 2D旋转 3D旋转 放大
BuptMelody的专栏
05-30 3035
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
css3transform--2D篇--rotate
她夏了夏天
12-13 653
说起css3，不得不提css3的维度模块（字我也不晓得写错没），维度比较简单，就是一个transform，但是呢，该属性对应的值却不少。     首当其冲的是rotate(XXdeg) ，该值表示元素在平面旋转的度数，也就是定义2D旋转。
关于transform: rotate(deg);设置在windows上的safari失效问题
qq_32814555的博客
01-19 1825
需要设置 -webkit-transform: rotate(deg)
H5C3之2D转换
zh_hunan的博客
10-22 325
2D 转换之 translate 2D 转换 2D 转换是改变标签在二维平面上的位置和形状 移动： translate 旋转： rotate 缩放： scale translate 语法 x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 transform: translate(x, y) transform: translateX(n) transfrom: translateY(...
css实现图片旋转动画2d
04-22
要实现图片的旋转动画，可以使用 CSS3 的 transform 属性。你可以将图片嵌入到 HTML 页面中，然后使用以下 CSS 代码： #img { -webkit-animation: rotate 2s linear infinite; -moz-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 其中，ID 为 img 的元素被设定了动画过渡效果，动画名称为 rotate。在 CSS3 中，可以通过 @keyframes 规则来定义动画的过渡状态。在这个例子中，动画从旋转 0 度开始，到旋转 360 度结束，利用了无限循环的方式实现旋转动画。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值