CSS transform变换(二)

最新推荐文章于 2024-01-10 18:00:00 发布

河北颜良

最新推荐文章于 2024-01-10 18:00:00 发布

阅读量353

点赞数

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/zhe06/article/details/106006396

版权

5.perspective 设置透视距离
属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
透视原理：近大远小。

perspective: 500px; 值越小，视点越近，图像越大

在这里插入图片描述
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
6.transform-style flat |preserve-3d 设置盒子是否按3d空间显示

.box{
           		width:499px;
            	height:312px;
            	margin:50px auto 0;
            	transform-style:preserve-3d;
            	position:relative;
            	margin-left: 10px;
            	margin-right: 10px;
            	float: left;            
           }

7.translateX,translateY,translate 设置三维移动

 案例来源网络，用于学习。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      /* 透视: 加给变换的父盒子，不能加在当前动画的标签上，否则无效 */
      /* 设置的是用户的眼睛距离屏幕的距离，越小距离屏幕越近，则效果更明显，越远则效果不会放大突兀 */
      /* 透视效果只是视觉上的呈现，并不是真正的3D效果 */
      perspective: 500px;
    }
    .box {
      width: 250px;
      height: 250px;
      background-color: green;
      transition: all 1s;
      margin: 200px auto;
    }
    .box:hover {
      /* translateZ 必须配合透视 perspective 来使用 */
      transform: translateZ(200px);
     // transform: translateY(300px);  这个是沿Y轴移动
     // transform: translateX(300px);  这个是沿X轴移动
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

8.rotateX,rotateY,rotateZ 设置三维旋转

.box .back_info{
            	width:499px;
           	 	height:312px;   *宽高
            	text-align:center;   *文本对齐
            	line-height:312px;    *属性设置行间的距离
            	position:absolute;    *定位
            	left:0;
            	top:0;
            	transform:rotateY(180deg);   *定义沿着 Y 轴的 3D 旋转。
            	backface-visibility:hidden;   *设置盒子背面是否可见
            	transition:all 500ms ease;     *过渡效果    
        	}

9.scaleX,scaleY,scaleZ 设置三维缩放

.test .scale{transform:scale(0.8);}

10,tranform-origin 设置变形的中心点

#div2{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: yellow;
	transform: rotate(45deg);
	transform-origin:50% 90%;
}

11.backface-visibility 设置盒子背面是否可见

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">		
    .box{
        position:relative;
        background:#66666;
        margin:50px;
        float:left;
        animation:box 4s infinite linear;	
    }
    .show{
        backface-visibility:visible;   *   	背面是可见的。
    }
    .hidden{
        backface-visibility:hidden;   * 	背面是不可见的。
    }
    @-webkit-keyframes box{
        0%{transform:perspective(500px) rotateX(0deg);}
        100%{transform:perspective(500px) rotateX(360deg);} 
    }
		</style>
	</head>
	<body>
    <div class="box show">背景可见</div>
    <div class="box hidden">背景隐藏</div>
	</body>
</html>