3dcss学习

学习某个项目中的3d模型 以下是准备：:

1 规定属于其父元素的第二个子元素的每个 p 的背景色：

父元素的第二个子元素，不管是什么元素

p:nth-child(2)
{
background:#ff0000;
}

2 onmousedown 事件会在鼠标按键被按下时发生。

3 度（Degress）。一个圆共360度

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

4
transform:rotate(7deg);
-ms-transform:rotate(7deg); 	/* IE 9 */
-moz-transform:rotate(7deg); 	/* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg) ; 	/* Opera */

5

<div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>

<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>

 

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了

 

 

<template>

<div>

<div class="wrapper" ref="wrapper">

<div>前</div>

<div>后</div>

<div>上</div>

<div>下</div>

<div>左</div>

<div>右</div>

</div>

<div class="wrapper" ref="wrapper">

<div>前</div>

<div>后</div>

<div>上</div>

<div>下</div>

<div>左</div>

<div>右</div>

</div>

</div>

</template>

<script>

export default {

name: "cube",

data() {

return {};

},

mounted() {

this.listenMouseEvent()

},

beforeDestroy () {

document.onmousedown = null

},

methods: {

listenMouseEvent() {

document.onmousedown = ev => {

//在包裹层上上摁下时，获取当前鼠标的位置

let x = ev.clientX;

let y = ev.clientY;

document.onmousemove = ev => {

//鼠标移动时

let x1 = ev.clientX - x + 30; //当前位置减去下时鼠标的位置，就获取移动了多少度，应为一开始有初始角度所以加30°

let y1 = ev.clientY - y - 30; //甚至样式每次鼠标移动式更改样式

this.$refs.wrapper.style.transform = `perspective(1000px) rotateY(${x1}deg) rotateX(${-y1}deg)`

};

document.onmouseup = () => {

document.onmousemove = null;

};

};

}

}

};

</script>

<style scoped lang="less">

.wrapper {

width: 200px;

height: 200px;

margin: 150px auto;

/*给父元素相对定位*/

position: relative;

/*父元素设为3d*/

transform-style: preserve-3d;

/*设置父元素得景深*/

transform: perspective(1000px) rotateY(30deg) rotateX(30deg);

}

 

/* 每个面的样式设置 */

.wrapper > div {

position: absolute;

width: 200px;

height: 200px;

border: 1px solid #333;

text-align: center;

line-height: 200px;

font-size: 20px;

font-weight: 600;

}

 

.wrapper > div:nth-child(1) {

transform: translateZ(100px);

background: rgba(0, 0, 255, 0.2);

}

 

.wrapper > div:nth-child(2) {

transform: translateZ(-100px);

background: rgba(0, 255, 0, 0.2);

}

 

.wrapper > div:nth-child(3) {

transform: rotateX(90deg) translateZ(100px);

background: rgba(255, 0, 0, 0.2);

}

 

.wrapper > div:nth-child(4) {

transform: rotateX(90deg) translateZ(-100px);

background: rgba(255, 255, 0, 0.2);

}

 

.wrapper > div:nth-child(5) {

transform: rotateY(90deg) translateZ(-100px);

background: rgba(0, 255, 255, 0.2);

}

 

.wrapper > div:nth-child(6) {

transform: rotateY(90deg) translateZ(100px);

background: rgba(255, 0, 255, 0.2);

}

</style>