CSS3 2D 3D动画实例展示 transform

程序员文章站 2022-03-29 08:07:30

...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		section {
			width: 500px;
			height: 400px;
			margin: 200px auto;
			background: url('timg.jpg');
			position: relative;
			border: 1px solid #000;
			perspective: 1000px;                  /* 视距 1000px为眼睛到屏幕的距离，添加之后就会有立体的效果了 */
		}
		section:hover .left{
			transform: rotateY(-110deg);          /* 沿着Y轴顺时针旋转110度 */
		}
		section:hover .right{
			transform: rotateY(110deg);           /* 沿着X轴顺时针旋转110度 */
		}
		.left, .right{
			position: absolute;
			top: 0;
			width: 50%;
			height: 100%;
			background:red;
			transition: all 1s;                   /* 给开门的动作添加一个 1s 的过渡效果 */
		}
		.left {
			left: 0;
			transform-origin: left;               /* 沿着左边的位置旋转， 也可以设置两个参数left top 左上角旋转，也可以设置大小px */
		}
		.right {
			right:0;
			border-left: 1px solid #000;
			transform-origin: right;
		}
		.left::before, .right::before {
			content: "";
			position: absolute;
			top: 50%;
			/* translate就是移动元素 */
			/* 注意： 当translate使用百分号%时，是以自己的大小为基准的 */
			transform: translateY(-50%);          /* 小圆圈垂直居中，将margin-top:-200px 改为translateY ; */
			width: 20px;
			height: 20px;
			border: 1px solid #000;
			border-radius: 50%;
		}
		.left:before {
			right: 10px;
		}
		.right:before {
			left: 10px;
		}
	</style>
</head>
<body>
	<section>
		<div class="left"></div>
		<div class="right"></div>
	</section>
</body>
</html>

CSS3 2D 3D动画实例展示 transform

CSS3中的transform属性进行2D和3D变换的基本用法

CSS3中的transform属性进行2D和3D变换的基本用法

CSS3中translate、transform和translation，和动画animation实例讲解

HTML和CSS3中的2D、3D结合实现动画效果

css3动画2D、3D转换的方法

CSS3中translate、transform和translation，和动画animation实例讲解

css3动画属性Transform实例教程

CSS3 2D 3D动画实例展示 transform

css3动画2D、3D转换的方法

HTML和CSS3中的2D、3D结合实现动画效果