transition，transform

最新推荐文章于 2023-11-21 16:08:48 发布

没错就是我哎呀

最新推荐文章于 2023-11-21 16:08:48 发布

阅读量119

点赞数

分类专栏：前端 css 文章标签： css html5 html

本文链接：https://blog.csdn.net/he3236220/article/details/120022565

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

小案例1

颜色渐变

html：
<div class="ceshi"></div>
css：
.ceshi{
  width: 400px;
  height: 400px;
  background: blue;
  transition: background-color 3s;
}
.ceshi:hover{
  background: red;
}

设置3D场景

在这里插入图片描述

位移和旋转

在这里插入图片描述
调整旋转中心

小案例2

div简单翻转，以后以后用于时间展示，或者倒计时。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .space {
      -webkit-perspective: 500;
      -webkit-perspective-origin: 50% 50%;
      overflow: hidden;
    }

    .pagegroup {
      width: 400px;
      height: 400px;
      margin: 0 auto;
      -webkit-transform-style: preserve-3d;
      position: relative;
    }

    .pagegroup div {
      width: 360px;
      height: 360px;
      padding: 20px;
      background-color: black;
      color: white;
      font-size: 360px;
      font-weight: bold;
      text-align: center;
      line-height: 360px;
      position: absolute;
      -webkit-transform-origin: bottom;
      -webkit-transition: -webkit-transform 1s linear;
    }

    .pagegroup div:nth-child(n+2) {
      -webkit-transform: rotateX(90deg);
    }

    .btn {
      text-align: center;
    }

    .btn a {
      display: inline-block;
      font-size: 50px;
      font-weight: 1000;
      list-style: none;
      text-decoration: none;
      margin: 20px;
    }
  </style>
  <script type="text/javascript">
    var curindex = 1;

    function next() {
      if (curindex == 5) {
        alert('别巴巴了，到头了！');
        return;
      }
      var curpage = document.getElementById("page" + curindex);
      curpage.style.webkitTransform = "rotateX(-90deg)";
      curindex++;
      var nextpage = document.getElementById("page" + curindex);
      nextpage.style.webkitTransform = "rotateX(0)";
    }
    function pre() {
      if (curindex == 1) {
        alert('过去回不去了！别挣扎了！')
        return;
      }
      var curpage = document.getElementById("page" + curindex);
      curpage.style.webkitTransform = "rotateX(90deg)";
      curindex--;
      var prepage = document.getElementById("page" + curindex);
      prepage.style.webkitTransform = "rotateX(0)";
    }
  </script>
</head>

<body>
  <div class="space">
    <div class="pagegroup">
      <div id="page1">1</div>
      <div id="page2">2</div>
      <div id="page3">3</div>
      <div id="page4">4</div>
      <div id="page5">5</div>
    </div>
  </div>
  <div class="btn">
    <a href="javascript:pre()">
      pre</a>
    <a href="javascript:next()">next</a>
  </div>
</body>

</html>

小案例3

正方体3D旋转

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.out-tab {
			-webkit-perspective: 800;
			-webkit-perspective-origin: 50% 50%;
		}

		.in-tab {
			width: 400px;
			height: 400px;
			margin: 15% auto;
			position: relative;
			text-align: center;
			-webkit-transform-style: preserve-3d;
			transform: translatez(-150px) rotateX(35deg) rotateY(45deg);
		}

		.in-tab div {
			width: 300px;
			height: 300px;
			line-height: 300px;
			margin: 0 auto;
			font-size: 40px;
			font-weight: bold;
			color: #fff;
			position: absolute;
			left: 0;
			top: 0;
		}

		.front {
			background-color: salmon;
			transform: translatez(150px);
		}

		.behind {
			background-color: aqua;
			transform: translatez(-150px);
		}

		.left {
			background-color: pink;
			transform: rotateY(-90deg) translateZ(150px);
		}

		.right {
			background-color: chartreuse;
			transform: rotateY(90deg) translateZ(150px);
		}

		.top {
			background-color: darkcyan;
			transform: rotateX(-90deg) translateZ(-150px);
		}

		.bottom {
			background-color: coral;
			transform: rotateX(-90deg) translateZ(150px);
		}

		.in-tab:hover {
			transform: translatez(-150px) rotateX(165deg) rotateY(55deg);
			transition: transform 3s linear;
		}
	</style>
</head>

<body>
	<div class="out-tab">
		<div class="in-tab">
			<div class="front">前</div>
			<div class="left">左</div>
			<div class="right">右</div>
			<div class="behind">后</div>
			<div class="top">上</div>
			<div class="bottom">下</div>
		</div>
	</div>
</body>

</html>