CSS3 3D变换

最新推荐文章于 2023-05-19 09:11:17 发布

置顶 ee_Andy

最新推荐文章于 2023-05-19 09:11:17 发布

阅读量451

点赞数

分类专栏： CSS3 文章标签： CSS3动画 3d CSS3 3D CSS3 3D 变换 3D动画

本文链接：https://blog.csdn.net/ee_Andy/article/details/52510601

版权

CSS3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS3 3D变换

使用3D变换时要加上内核（-ms-：IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核）

使用 3D变换步骤：

1.transform-style: preserve-3d // 建立3D空间

2. 设置景深 perspective:100px; // 有近大远小的感觉 , 距离我看他的地方

示例：

  
  .box{width:100px;height:100px;padding:100px;border:5px solid #000;margin:30px auto;-webkit-transform-style:preserve-3d;-webkit-perspective:100px; }  //  建立3D空间 ，设置景深
.div1{width:100px;height:100px;background:red;transition:1s;}   // 加个过渡
.box:hover .div1{-webkit-transform:rotateX(180deg)} // X轴旋转180度

3. perspective-origin 设置景深的基点 就是你站在什么方位去看这盒子

示例：

  
  -webkit-perspective-origin:left top   // 左上角观看

transform 下新增函数

1.rotateX( 180deg ) -->> X轴旋转

2.rotateY(180deg) -->> Y 轴旋转

3.rotateZ(180deg) -->> Z 轴旋转 Z轴就是电脑屏幕的

4.translateZ(100px) -->> Z 轴的移动 (离自己近感觉变大了，离自己远感觉变小了)可以是负值，和景深的值一起调试

5.scaleZ() -->>

示例：旋转的盒子

  
  <!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<style>
	.wrap{width:100px;height:100px;padding:100px;border:5px solid #000;margin:100px auto;-webkit-perspective:200px;/*-webkit-perspective-origin:left top */}
	.box{width:100px;height:100px;background:red;position:relative;-webkit-transform-style:preserve-3d;transition:2s;-webkit-transform-origin:center center -50px;}
	.box div{width:100px;height:100px;position:absolute;font-size:50px;text-align:center;line-height:100px;}
	.box div:nth-of-type(1){background:#9c0;left:0;top:-100px;-webkit-transform-origin:bottom;-webkit-transform:rotateX(90deg)}
	.box div:nth-of-type(2){background:#CF3;left:-100px;top:0;-webkit-transform-origin:right;-webkit-transform:rotateY(-90deg)}
	.box div:nth-of-type(3){background:#CCF;left:0;top:0;}
	.box div:nth-of-type(4){background:#0c9;left:0;top:100px;-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg)}
	.box div:nth-of-type(5){background:#0c9;left:100PX;top:0;-webkit-transform-origin:left;-webkit-transform:rotateY(90deg)}
	.box div:nth-of-type(6){background:#f0c;left:0;top:0;-webkit-transform:translateZ(-100px) rotateX(180deg);}
	.wrap:hover .box{-webkit-transform:rotateX(720deg)}
	</style>
</head>
<body>
 <div class="wrap">
 	<div class="box">
 		<div>1</div>
 		<div>2</div>
 		<div>3</div>
 		<div>4</div>
 		<div>5</div>
 		<div>6</div>
 	</div>
 </div>
</body>
</html>

ee_Andy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 3D变换

CSS3 3D变换使用3D变换时要加上内核（-ms-：IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核）使用3D变换步骤：1.transform-style:preserve-3d // 建立3D空间2. 设置景深 perspective:100px; //
复制链接

扫一扫

专栏目录