html与css实现2d效果的多种旋转

最新推荐文章于 2023-05-07 17:22:32 发布
最新推荐文章于 2023-05-07 17:22:32 发布
阅读量2.9k 收藏 35
点赞数 12
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dayexiaofan/article/details/90474163
版权

1、伪元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素选择器</title>
		<style>
			span::before{
				content: "楚乔是";
			}
			span::after{
				content: "的";
			}
		</style>
	</head>
	<body>
		<span>燕洵</span>
		<span>燕洵</span>
		<div></div>
	</body>
</html>

在这里插入图片描述
2、文字对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字对齐</title>
		<style>
			div{
				width: 300px;
				height: 30px;
				border: 1px solid red;
				line-height: 30px;
			}
			span{
				display: inline-block;
				vertical-align: middle;
				width: 10px;
				height: 10px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			<span></span>文字
		</div>
	</body>
</html>

在这里插入图片描述
3、体会过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>体会过渡</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				/* transition: width 0.5s ease 0s,height 0.3s;多组属性用逗号分隔 */
				transition:all 0.5s;/* 过渡写到本身上 谁做过渡动画,写到谁身上 */
			}
			div:hover{
				width: 800px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

注：transition属性是用来设置多长时间来达到指定的长度与宽度
在这里插入图片描述
4、京东效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东效果</title>
		<style>
			div{
				width: 183px;
				height: 130px;
				border: 1px solid red;
				overflow: hidden;
				/* hidden内容会被修剪,并且其余内容是不可见的 */
			}
			div img{
				width: 193px;
				height: 130px;
				transition:all 0.4s;
			}
			div:hover img{
				margin-left: -10px;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../img/1.jpg" alt="loading" />
		</div>
	</body>
</html>

在这里插入图片描述
5、京东侧边

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东侧边</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.subnav{
				margin: 100px auto;
				width: 20px;
			}
			.subnav li{
				width: 20px;
				height: 20px;
				margin: 3px 0;
				background-color: pink;
				position: relative;
			}
			.subnav div{
				position: absolute;
				right: 0;
				top: 0;
				height: 20px;
				width: 0;
				background-color: purple;
				transition: all 0.6s;
				z-index: -1;
			}
			.subnav li:hover div{
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="subnav">
			<ul>
				<li><div></div></li>
				<li><div></div></li>
				<li><div></div></li>
				<li><div></div></li>
				<li><div></div></li>
			</ul>
		</div>
	</body>
</html>

在这里插入图片描述
6、变形之位移

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变形之位移</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				/* transition过渡 */
				/* transition:translate(100px,0) x 100 y 是 0 */
				transition: all 0.4s;
			}
			div:hover{
				transform: translate(100px,100px);
				/* 转移后的新位置 */
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
7、让定位的盒子水平居中和垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>让定位的盒子水平居中和垂直居中</title>
		<style>
			div{
				position: absolute;
				width: 200px;
				height: 200px;
				background-color: pink;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				/* transition 如果x-50% 跟父亲没关系，是走自己盒子宽度的一半 */
				/* transition 如果y-50% 跟父亲没关系，是走自己盒子高度的一半 */
			} 	
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
8、变形之缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变形之缩放</title>
		<style>
			div{
				width:200px;
				height:200px;
				background-color: pink;
			}
			div:hover{
				transform: scale(0.8);//高度省略默认和宽度一起
				/* transform: scale(0.8,1); */
				/* transform: scale(1.0.8); */
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
9、新浪图片放大效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新郎图片放大效果</title>
		<style>
			div{
				width: 386px;
				height: 260px;
				overflow: hidden;
			}
			div img{
				transition: all;0.5s
			}
			div:hover img{
				transform: scale(1.1);
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../img/1.jpg" height="260" width="386" alt="loading"/>
		</div>
	</body>
</html>

在这里插入图片描述
10、变形之旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变形之旋转</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 100px auto;
				transition: all 0.6s;
			}
			div:hover{
				transform: rotate(360deg);
			}
			img{
				transition: all 0.6s;
			}
			img:hover{
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div>123</div>
		<img src="../img/1.jpg" width="585" height="585" alt="loading" />
	</body>
</html>

在这里插入图片描述
11、变形之旋转原点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变形之旋转原点</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 100px auto;
				transition: all 0.6s;
				transform-origin: right bottom;
				/* 设置旋转中心点为右下角 */
			}
			div:hover{
					transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div>123</div>
	</body>
</html>

在这里插入图片描述
12、旋转的楚乔

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转的楚乔</title>
		<style>
			div{
				width: 250px;
				height: 170px;
				border: 1px solid red;
				margin: 150px auto;
				position: relative;
			}
			div img{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				transition: all 0.6s;
				transform-origin: top right;
			}
			div:hover img:first-child{
				transform: rotate(60deg);
			}
			div:hover img:nth-child(2){
				transform: rotate(120deg);
			}
			div:hover img:nth-child(3){
				transform: rotate(180deg);
			}
			div:hover img:nth-child(4){
				transform: rotate(240deg);
			}
			div:hover img:nth-child(5){
				transform: rotate(300deg);
			}
			div:hover img:nth-child(6){
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../img/2.jpg" alt="loading"/>
			<img src="../img/3.jpg" alt="loading"/>
			<img src="../img/4.jpg" alt="loading"/>
			<img src="../img/5.jpg" alt="loading"/>
			<img src="../img/6.jpg" alt="loading"/>
			<img src="../img/11.jpg" alt="loading"/>
		</div>
	</body>
</html>

在这里插入图片描述
13、过渡给颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡给颜色</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				transition: all 2s;
			}
			div:hover{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
14、变形-倾斜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变形-倾斜</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				transform: skew(30deg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述
15、鼠标经过显示阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标经过显示阴影</title>
		<style>
			div{
				width: 150px;
				height: 300px;
				border: 1px solid #ccc;
				background-color: pink;
				transition: all 0.6s;
			}
			div:hover{
				box-shadow: 0 10px 20px rgba(0,0,0,0.5);
				transform: translateY(-20px);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

在这里插入图片描述

a little peanut
关注
  • 12
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JQUERY插件制作动态切换和HTML和CSS3制作动画2D旋转效果
weixin_44540672的博客
01-18 406
1.使用JQUERY插件制作动态切换代码如下： jQuery(&amp;quot;.dtbm&amp;quot;).slide({ mainCell:&amp;quot;.contentbox ul&amp;quot;, autoPage:true, effect:“top”, autoPlay:true, vis:5 效果如图1 图1 2.使用HTML和CSS3制作动画2D旋转效果代码如下： CSS3动画（1） .div1:hover{
CSS3 | 背景样式、文字、字体和2D旋转样式
weixin_47982238的博客
07-28 187
一、背景样式 1.background-size background-size:100%; //背景图大小 2.background-origin 1)border-box //边框区域 2)padding-box //内边距区域 3)content-box //有效区域 二、文本样式 1.text-shadow: 5px 5px 5px #fcf; （规定水平阴影为5px, 垂直阴影5px, 模糊距离5px, 阴影颜色fcf）下面是个例子： <...
基于html和css3实现旋转相册
11-18
含有两个html制作的相册，一个为立方体鼠标经过可展开的，一个为十张图片围绕一张旋转的相册，图片皆可在images文件夹中进行替换。
css2d之旋转小风车
yuxiaoc的博客
08-19 196
<head> <meta charset="UTF-8"> <title>小风车</title> <style> .parent { width: 600px; height: 600px; margin: 0 auto; position: relative; } section
2D翻转效果之CSS
qq_43687594的博客
04-26 365
翻转效果，其实是利用了旋转的属性方法，即：transform：rotate(); 旋转rotate()，指的是让元素在二维平面中，顺时针或者逆时针方向进行旋转。旋转单位是deg（度），即degree的缩写。
html：对于2d转换的初步认知+小盒子旋转的hover效果实现
astar2022的博客
07-19 1025
今日份更新，谢谢大家支持，我会更加努力的。
html关于实现图片2D,3D翻转效果
qq_52292165的博客
07-13 2065
转眼间，大一生活已经落下帷幕。通过本学期学习，我完成了我的期末大作业，特意分享出来，也作为我的一个成长历程。今后学习了javascricp之后也会不断完善效果。话不多说，直接分享代码： 在这里插入代码片 ...
js+css3实现楼盘模型旋转动画效果.zip
11-24
总的来说，“js+css3实现楼盘模型旋转动画效果”结合了前端开发的多种技术，通过JavaScript的动态控制和CSS3的动画特性，创造出引人入胜的用户体验。这种技术应用在房地产网站上，能够生动展示楼盘的各个角度，提升...
CSS3实现3D立方体旋转动画特效特效代码
03-20
在CSS3中，3D立方体旋转动画特效是一种利用现代浏览器对CSS3特性的支持，创建出具有立体感和动态变换效果的图形技术。这种特效不仅能够提升网站的视觉吸引力，还能为用户交互提供新颖的方式。以下是关于CSS3实现3D...
CSS3实现超酷图片镜像效果.zip
11-17
`transform`允许我们对元素应用2D或3D转换，其中包括翻转、旋转、缩放等多种操作。在创建图片镜像时，我们主要使用`transform: scale(-1)`来实现水平翻转，即镜像效果。 以下是一个简单的HTML结构，用于展示一个...
html5实现3D页面层叠切换效果特效代码
03-20
通过CSS3的`transform`属性，可以实现元素的旋转、缩放、位移等3D变换。在页面层叠切换特效中，这些变换被用来创建出立体空间感，使用户在点击索引按钮时，页面元素能以逼真的3D方式过渡。 其次，JavaScript是实现...
CSS实现2D卡片翻转特效
m0_61486963的博客
10-06 1098
🦖我是Sam9029，一个前端`最近在重温学习CSS transform 和 transition以及 CSS 的 2D 效果 remote（记得以前好像有个什么游戏来着也有这种特效，一时间给忘了有些记不起来了）
CSS动画-2D变换-transform实现旋转、缩放、平移、倾斜
Ares·茂的博客
06-27 1825
1.1 transform的基本属性值 在CSS3中提供了transform和transform-origin两个用于实现2D变换的属性，其中transform属性用于实现平移、缩放、旋转和倾斜等2D变换，transform-origin用于设置中心点的变换； 1.2 应用transform属性实现旋转 应用transform属性的rotate（）函数分别实现顺时针旋转30°和逆时针旋转30°，关键代码如下： #rotate{ -moz-transform:rotate(30deg); /*Fir
CSS3过渡、2D变形 3D变形
Pruett的博客
03-07 509
一个小的属性介绍： backface-visibility:hidden; //不是正面就将其隐藏，在屏幕上翻转超过90度，就不是正面了 1.过渡 1.介绍：像一个flash小动画一样，可以实现补间动画，并且当前元素只要有属性发生变化时，就可以实现平滑的过渡，可以使用hover来实现两种状态，但不仅仅局限于hover状态来实现过渡。（谁做动画，过渡写在谁里面） 2.属性 trans...
css2D、3D详解
weixin_69474694的博客
07-15 532
css2D、3D详解
html 2D旋转
最新发布
m0_71926767的博客
05-07 120
鼠标经过图片，使图片旋转到自己想要的度数~~
HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
weixin_33208553的博客
06-03 847
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。文章目录html5+css3实现2D-3D动画效果实例2D变换3D变换案例实现相关知识点透明属性过渡属性定位属性2D中应用实现案例3D中应用实现案例css3动画效果显示： 2D变换是在一个平面对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸.*2d对下面面坐标系简单分...
html css 2d旋转
m0_70977782的博客
02-24 338
2d旋转 语法：transform:rotate(45deg);沿着中心点旋转 transform:rotateX(45deg); 沿着X轴旋转 transform:rotateY(45deg); 沿着Y轴旋转 2d旋转 deg旋转的度数 元素的基点位置 设置元素的基点位置:设置围绕哪个点进行变化，语法: transform-origin:水平方向 垂直方向 ;取值: px 百分比(相存于元素自身的觉高计算) 关键字：水平 left cent
html与css实现2D效果旋转
dayexiaofan的博客
05-23 2092
1、盾牌 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="shortcut icon" href="bkq.ico" type="image/x-icon"/&gt...
css实现图片旋转动画2d
04-21
非常感谢您的提问。关于CSS实现图片旋转动画2D，可以通过CSS3中的 transform 属性和 animation 属性来实现。具体实现方式可以参考以下...通过以上代码，就可以实现一个简单的图片旋转动画2D效果。希望能对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值