css3 高级特效图片实现3D视觉效果图片3D旋转移动倾斜缩放

最新推荐文章于 2024-04-12 10:14:17 发布

lm778

最新推荐文章于 2024-04-12 10:14:17 发布

阅读量2k

点赞数

分类专栏： css 文章标签： css3 3d css

本文链接：https://blog.csdn.net/m0_59798527/article/details/125694374

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css3 高级特效

利用的css属性

利用属性 transform
浏览器支持：
在IE10，火狐浏览器和欧朋浏览器中支持transform属性但在Chrome和苹果Safari中要求前缀内核-webkit-版本

位移

translate() 位移图片的位置相对自身原来位置移动
translate(x，y)
x表示在x轴即水平方向上的移动
y表示在y轴即垂直方向上的移动
x，y的值可以去取负值
例：transform: translate(-40px);
即在x轴上向左移动40像素
另：translatex()表示单独在x轴上的移动
translatey()表示单独在y轴上的移动
且当translate（）中的值为一个时，默认为x轴
代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				border:1px solid red;
				background-color: aqua;
				/* 向右移动50px 向下移动60px */
				/* transform: translate(50px, 60px); */
				/* 向右移动60px */
				/* transform: translatex(60px)*/
					/* 向下移动60px */
					/* transform: translatey(60px)*/
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

推荐使用最新版本谷歌浏览器打开，注释内容解除注释即可看到效果

旋转

rotate()
在一个给定度数顺时针旋转的元素。当所给定的值为负数时，此时元素逆时针旋转单位为角度（deg）
且rotate()也可单独设置x，y轴
例：
transform: rotateX(60deg);
元素在X轴上旋转60度
transform: rotateY(40deg);
元素在y轴上旋转40度
代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background-color: #f0f;
				transition: 1s;
			}

			.box:hover {
				/* transform: rotate(45deg); */
				transform: rotatex(60deg);
				/* transform: rotatey(60deg); */
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

图片效果更为直观

缩放

scale()
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform: scale(2,3);
元素宽度变成原来的2倍，高度变为原来大小的3倍
transform: scale(0.8);
transform: scale(.8);
两种方法都表示元素宽高都缩小为原来的0.8倍

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background-color: #f0f;
				transition: 1s;
			}

			.box:hover {
				/* transform: scale(.8); */
				/* transform: scale(2); */
				transform: scale(2, 3);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

倾斜

skew()
transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。
代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 100px;
				height: 75px;
				background-color: red;
				border: 1px solid black;
			}

			div#div2 {
				transform: skew(30deg, 20deg);
				-ms-transform: skew(30deg, 20deg);
				/* IE 9 */
				-webkit-transform: skew(30deg, 20deg);
				/* Safari and Chrome */
			}
		</style>
	</head>
	<body>

		<div></div>

		<div id="div2"></div>

	</body>
</html>

在这里插入图片描述

lm778

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css3 高级特效图片实现3D视觉效果图片3D旋转移动倾斜缩放

利用属性 transform浏览器支持：在IE10，火狐浏览器和欧朋浏览器中支持transform属性但在Chrome和苹果Safari中要求前缀内核-webkit-版本推荐使用最新版本谷歌浏览器打开，注释内容解除注释即可看到效果图片效果更为直观代码实现：倾斜skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX();表示只在X轴(水平方向)倾斜。skewY();表示只在Y轴(垂直方向)倾斜。代码实例：..
复制链接

扫一扫