vue 添加旋转图片 修改css transform 值

//点击放大图片并旋转图片

conponents组建

<template>
    <!-- 过渡动画 -->
    <transition name="fade">
        <div class="img-view" @click="bigImg">
            <!-- 遮罩层 -->
            <div class="img-layer">
                <div class="imgBox">
                    <div style="width: 400px;height: 400px;margin-bottom: 20px;">
                        <img :src="imgSrc" :style="{transform:'rotateZ('+deg+'deg)'}">
                    </div>
                    <div class="rotateBox">
                        <el-button type="primary" @click.stop="fan()">
                            <svg-icon icon-class="zuoRotate" />
                            逆时针旋转
                        </el-button>
                        <el-button type="primary"  @click.stop="zheng()" style="margin-left:20px ;">
                            <svg-icon icon-class="youRotate" />
                            顺时针旋转
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
    export default {
        props: ['imgSrc'],
        data(){
            return{
                deg:0,
            }
       },
        methods: {
            bigImg() {
                // 发送事件
                this.$emit('clickit')
            },
            fan(){
                this.deg -= 90;
                if(this.deg >= 360){
                    this.deg = 0
                }
            },
            zheng(){
                this.deg += 90;
                if(this.deg >= 360){
                    this.deg = 0
                }
            }
        }
    }
</script>
<style scoped>
    /*动画*/
    .fade-enter-active,
    .fade-leave-active {
        transition: all .2s linear;
        transform: translate3D(0, 0, 0);
    }
    
    .fade-enter,
    .fade-leave-active {
        transform: translate3D(100%, 0, 0);
    }
    /* bigimg */
    
    .img-view {
        position: relative;
        width: 100%;
        height: 100%;
    }
    /*遮罩层样式*/
    .img-view .img-layer {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    /*不限制图片大小，实现居中*/
    .img-view .imgBox {
        position: absolute;
        left: calc(50% - 250px);
        top: 100px;
        width: 400px;
        height: auto;
        max-width: 100%;
        max-height: 400px;
    }
    .img-view .imgBox img {
        display: block;
        width:400px;
        height: auto;
        max-width: 100%;
        max-height: 400px;
        margin: auto;
        z-index: 1000;
        margin-bottom: 10px;
    }
    
    .img-view .imgBox .rotateBox {
        text-align: center;
    }
</style>

 

使用:

<img src="https://mdn.mozillademos.org/files/12708/image-with-title.png" @click="clickImg($event)" width="100" height="100" style="margin-left: 120px;">           

<!-- 放大图片 -->
 <big-imgrotate v-if="showImg" @clickit="closeBigImg" :imgSrc="imgSrc"></big-imgrotate>

 

import BigImg from '@/components/bigImg_rotate/index.vue';
    export default {
        components: {
            'big-imgrotate': BigImg
        },

　　data() {
            return {

　　　　　　showImg:false

　　　　}

　　},

　　methods: {
            //点击放大图片
            clickImg(e) {
                this.showImg = true;
                // 获取当前图片地址
                this.imgSrc = e.currentTarget.src;
            },

　　　　//关闭放大图片
           closeBigImg(e) {
                this.showImg = false;
            },

　　}

}