首页 前端知识 CSS3之transform详解及示例(3d变形)

CSS3之transform详解及示例(3d变形)

2024-08-10 00:08:26 前端知识 前端哥 903 914 我要收藏

文章目录

  • 一、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变形效果,希望可以给大家带来思路上的灵感。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15126.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!