CSS样式变换效果及动画

最新推荐文章于 2024-08-15 09:57:13 发布

离拥

最新推荐文章于 2024-08-15 09:57:13 发布

阅读量967

点赞数

文章标签： css css3 动画

本文链接：https://blog.csdn.net/Mr_Rongyao/article/details/127824029

版权

本文介绍了如何使用CSS3的transform属性实现2D和3D变换，包括translate、scale、rotate、skew和matrix等方法。同时讲解了transition和@keyframes创建过渡和动画效果。通过一个具体的图片魔方例子，展示了如何结合这些技术实现3D旋转动画，以及在鼠标悬停时触发不同侧面的显示变化。

摘要由CSDN通过智能技术生成

笔记总结

CSS的变换效果
- transform 2d转换
  - translate（）进行平移效果，有2个参数对应X、Y轴。
  - scale()用于缩放标签，当参数只有一个时，整体放大和缩小，当参数是两个时，可以分别调整x、y轴的缩放倍数。
  - rotate（）用于旋转元素。rotateX() rotateY() rotateZ() 分别绕着xyz轴旋转
  - skew()有两个参数分别代表在x轴方向的扭曲程度，以及在y轴方向的扭曲程度。
  - matrix()把所有2D转换方法组合在一起。matrix()方法需要六个参数，包含数学函数，允许你：旋转、缩放、移动以及倾斜。
- trabsform 3d转换
  - Perspective:同来控制视距的属性，属性值事指距离屏幕的像素值。（例Perpective:800px)
  - transform-style:用来transform的显示效果，有平面模式（fiat）,3d模式（preserve-3d）
  - transform-origin:用来控制旋转轴的位置
过渡效果

transition：默认是所有属性都进行过渡，参数列表（name|duration|delay）。

transition支持部分属性过渡，例如你可以指定宽高属性拥有过渡属性，这时其他属性将不再支持过渡。
动画效果

@keyframes用来设置动画效果，可以使用from和to定义开始动画和结束动画，也可以使用百分比控制整个动画的节奏

作业

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片魔方</title>
	</head>
	<style>
		body {
			perspective: 800px;
		}
		@keyframes myAnimation{
			from{
				transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
			}
			to{
				transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
			}
		}

		.con {
			width: 200px;
			height: 200px;
			margin: 300px auto;
			position: relative;
			border: 1px solid red;
			transform-style: preserve-3d;
			transform: rotateX(30deg) rotateY(30deg);
			animation: myAnimation 10s infinite linear;
		}

		.con>img {
			width: 200px;
			height: 200px;
			position: absolute;

		}
		
		.con:hover > img:first-child{
			transform: translateZ(-200px);
		}
		
		.con > img:first-child{
			transform: translateZ(200px);
		}
		
		.con:hover > img:nth-child(2){
			transform: translateX(-200px) rotateY(90deg);
			
		}

		.con>img:nth-child(2) {
			left: -200px;
			transform: rotateY(90deg);
			transform-origin: right;
		}
		
		.con:hover>img:nth-child(3) {
			transform: translateX(200px) rotateY(-90deg);
		}

		.con>img:nth-child(3) {
			right: -200px;
			transform-origin: left;
			transform: rotateY(-90deg);
		}
		
		.con:hover>img:nth-child(4) {
			transform: translateY(-200px) rotateX(-90deg);
		}
		

		.con>img:nth-child(4) {
			top: -200px;
			transform-origin: bottom;
			transform: rotateX(-90deg);
			/* 			transform-origin:left;
			transform: rotateY(-90deg); */
		}
		
		.con:hover>img:nth-child(5) {
			transform: translateY(200px) rotateX(90deg);
		}

		.con>img:nth-child(5) {
			bottom: -200px;
			transform-origin: top;
			transform: rotateX(90deg);
		}
		
		.con:hover>img:last-child {
			transform: translateZ(400px);
		}

		.con>img:last-child {
			transform: translateZ(200px);
		}
	</style>
	<body>
		<div class="con">
			<img src="./1.png" alt="">
			<img src="./2.png" alt="">
			<img src="./3.png" alt="">
			<img src="./衣服.png" alt="">
			<img src="./5.jpg" alt="">
			<img src="./6.jpg" alt="">
		</div>
	</body>
</html>