CSS3之transform详解及示例（3d变形）

文章目录

• 一、3D空间显示和视距
• 二、3D变形
• • 1.基础知识：
  • 2.示例
• 总结

一、3D空间显示和视距

提示：想要使用3d变形，必须先设置3d显示区域

1.首先给父容器（显示区盒子）设置：transform-style: preserve-3d;

约束子元素怎么样在空间显示 transform-style 属性的默认值是 flat；在2d空间显示，我们要修改为 preserve-3d 在3d空间中显示

2.继续给父容器（显示区盒子）设置：perspective：1000

视距 perspective 属性的默认值是 none；我们可以根据自己的需求，自行设置视距，数字越大，越平面化，数字越小，越立体化。

3.兼容

-webkit-perspective: 1000px;
除了加前缀以外，火狐浏览器还得设置像素值，数字不生效。

二、3D变形

1.基础知识：

3d变形和2d变形基本一模一样，只不过多了一个Z轴的变形。

	//缩放变形
    scaleX()   scaleY()    scaleX()；
    //旋转变形
	rotateX()  rotateY()   rotateZ() 
	//平移变形
	translateX()   translateY()  translateZ() 
	//扭曲变形
	skewX()   skewY()

2.示例

代码如下（示例）：

	.box{
         width: 220px;
         height: 520px;
         transform-style: preserve-3d;
         list-style: none;
         position: relative;
     }
     .box:hover{
         animation-play-state: paused;
     }
     .box li{
         width: 100%;
         height: 100%;
         position: absolute;
         background-size: cover;
         background-position: center;
         box-shadow: 0 0 10px 0 #fff;
         transition: all 2s;
     }
     .box li:nth-child(1){
         background-image: url(./img/图片1.jpg);
         transform: translateZ(300px);
     }
     .box li:nth-child(2){
         background-image: url(./img/图片2.webp);
         transform: rotateY(45deg) translateZ(300px);
     }
     .box li:nth-child(3){
         background-image: url(./img/图片3.webp);
         transform: rotateY(90deg) translateZ(300px);
     }
     .box li:nth-child(4){
         background-image: url(./img/图片4.webp);
         transform: rotateY(135deg) translateZ(300px);
     }
     .box li:nth-child(5){
         background-image: url(./img/图片5.webp);
         transform: rotateY(180deg) translateZ(300px);
     }
     .box li:nth-child(6){
         background-image: url(./img/图片6.webp);
         transform: rotateY(225deg) translateZ(300px);
     }
     .box li:nth-child(7){
         background-image: url(./img/图片7.webp);
         transform: rotateY(270deg) translateZ(300px);
     }
     .box li:nth-child(8){
         background-image: url(./img/图片8.webp);
         transform: rotateY(315deg) translateZ(300px);
     }

最后再设置上一个动画就可以了

	@keyframes move {
        0% { transform: rotateY(0deg); }
        100% { transform: rotateY(360deg); }
    }
    .box{
   		 animation: move 10s linear infinite;
         animation-play-state: running;
    }

很简单的一个3d变形效果，主要还是考验大家对X,Y,Z三个轴的理解，能否在脑海中构思出大致的逻辑。
X轴和Y轴不用过多解释，一个水平轴，一个垂直轴，这里简单说一下Z轴。
你可以理解成，从电脑屏幕到你眼睛这个方向的一条轴，只不过由于屏幕是平的，这个轴的距离无论是多少，对于你来说都是一个平面而已。

总结

本次带大家简单了解了一下transform中的3d变形效果，希望可以给大家带来思路上的灵感。